Generador de Bordes Degradados CSS
Genera código CSS de borde degradado al instante con vista previa en vivo.
135°
0%
100%
Vista previa
Código CSS
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}¿Qué es un borde degradado CSS?
CSS no soporta colores de borde degradados mediante border-color. Esta herramienta usa el truco background-clip — superponiendo dos fondos recortados a padding-box y border-box respectivamente.
Tipos de Degradado
Degradado Lineal
Los colores transicionan en línea recta según el ángulo especificado. Ideal para efectos de borde con dirección como de arriba a abajo o en diagonal.
Degradado Cónico
Los colores rotan alrededor de un punto central. Aplicado al borde, crea un efecto arcoíris que envuelve todo el elemento.
Cómo usar
Selecciona un tipo de degradado (Lineal o Cónico), configura el ángulo y las paradas de color, ajusta el grosor y el radio del borde, y copia el código CSS generado.
Preguntas Frecuentes
¿Puedo aplicar un degradado directamente a border-color?
No. CSS border-color solo soporta colores sólidos. Esta herramienta usa el truco background-clip para crear bordes degradados sin JavaScript.
¿Cuál es la diferencia entre bordes con degradado lineal y cónico?
El degradado lineal fluye en una dirección (ej. de arriba a abajo). El degradado cónico rota alrededor del elemento, mostrando todos los colores a lo largo de todo el borde.
¿Funciona en todos los navegadores?
El método background-clip funciona en las versiones modernas de Chrome, Firefox, Safari y Edge. No se soporta Internet Explorer.
¿Cómo uso un borde degradado con Tailwind CSS?
Tailwind no soporta bordes degradados nativamente. Agrega el CSS generado a @layer utilities o aplícalo como estilo en línea.
¿Qué es un borde con degradado cónico?
Un borde con degradado cónico aplica colores que rotan alrededor de un punto central, creando efectos de arcoíris o rotación.
¿Puedo animar un borde degradado?
Sí. Puedes animar el ángulo de conic-gradient usando @keyframes y propiedades CSS personalizadas para crear un borde degradado giratorio.