Generador de bordes degradados CSS

Cómo funciona

1. Elige los colores: selecciona dos o más colores para el degradado mediante los selectores.
2. Ajusta el ancho y el radio: ajusta el grosor y el redondeo de las esquinas según tu diseño.
3. Copia el CSS: el código generado mediante border-image o la técnica de pseudoelemento está listo para pegarse en tu hoja de estilo.

¿Por qué usar este generador de borde en degradado?

Los bordes en degradado CSS son un detalle de diseño llamativo usado en los frameworks UI modernos, las tarjetas, los estados hover de botones y las secciones destacadas. Ahora bien, la propiedad CSS border solo admite colores sólidos, crear un borde en degradado exige un truco mediante border-image o un pseudoelemento con manipulaciones de background-clip. Este generador cubre ambas técnicas y produce un CSS limpio y listo para copiar, para que te concentres en el diseño en lugar de en la sintaxis.

Funcionalidades

• Dos métodos: elige entre border-image (sencillo) y la técnica del pseudoelemento con background-clip (admite border-radius).
• Compatibilidad con border-radius: el método del pseudoelemento permite esquinas redondeadas que border-image no puede producir.
• Degradados multistop: añade tantos pasos de color como quieras para efectos arcoíris o con los colores de tu marca.
• Vista previa en directo: ve exactamente cómo se renderiza el borde antes de copiar el código.
• Control del ángulo: rota la dirección del degradado con un selector de ángulo visual.

Preguntas frecuentes

¿Por qué no puedo usar border-image con border-radius?

border-image sustituye por completo el renderizado del borde e ignora border-radius, las esquinas se quedan cuadradas. Para combinar borde en degradado y esquinas redondeadas, usa la técnica del pseudoelemento: aplica el degradado al fondo de un ::before y background-clip: padding-box al propio elemento.

¿Puedo animar bordes en degradado?

Sí. Los bordes en degradado creados con el método background + pseudoelemento se pueden animar transicionando background-position sobre el degradado. Aplica background-size: 300% 300% y anima background-position para un efecto fluido.

¿Funciona en botones y campos de entrada?

Sí, el CSS generado funciona en cualquier elemento HTML. Para los botones, prefiere el pseudoelemento para conservar el border-radius. Para los campos de entrada, aplica la técnica border-image o envuelve el campo en un contenedor en degradado.

Lo que los bordes en degradado CSS realmente resuelven

La propiedad CSS border acepta un solo color sólido, no un degradado. Esta es una limitación de la era 1996 que sobrevivió hasta el CSS moderno. Durante la mayor parte de la historia web, los diseñadores que querían un contorno en degradado alrededor de una tarjeta o botón tenían que elegir entre usar una imagen de fondo (raster, no escala), envolver el elemento en un contenedor coloreado (funciona pero rompe sutilmente el diseño), o aceptar bordes sólidos. Los bordes en degradado CSS son soluciones que simulan el aspecto de border: 3px solid linear-gradient(...) a través de otras propiedades CSS, ya que esa sintaxis exacta no existe.

Dos técnicas dominan. border-image (CSS Backgrounds and Borders Module Level 3, 2012) reemplaza la representación del borde con un degradado o imagen. Funciona, pero border-image ignora completamente border-radius: las esquinas permanecen cuadradas. La técnica del pseudo-elemento + background-clip usa un elemento envoltorio con un fondo en degradado y una superposición interna que enmascara todo excepto el área del borde. Esto soporta esquinas redondeadas pero requiere dos capas de CSS y un manejo cuidadoso de padding versus content boxes. Un tercer enfoque moderno usa mask-composite (navegadores 2020+) para una solución de elemento único más limpia.

Los bordes en degradado importan para las tendencias de diseño actuales. Los diseños basados en tarjetas (Stripe, Linear, Vercel, Cursor) usan bordes en degradado sutiles de dos colores para añadir profundidad sin pesadez. Los destacados de funciones premium a menudo dibujan un borde en degradado colorido para denotar el estado «Pro». Las estéticas cyberpunk y synthwave usan bordes en degradado neón para evocar ambientes retro-futuristas. Los lanzamientos de productos de IA en 2023-2024 estandarizaron los bordes en degradado animados multi-color como firma visual (OpenAI, Anthropic, Perplexity). Lo que antes requería editores de imágenes ahora se envía como 5 a 10 líneas de CSS.

Cómo funciona esta herramienta tras bambalinas

La vista previa es un solo div con las dos técnicas aplicadas vía CSS en línea, intercambiables según tu elección de método. Para border-image, la herramienta establece border: Npx solid transparent con border-image: linear-gradient(...) 1; el valor de corte 1 le dice al navegador que use el degradado a tamaño completo para cada borde. Para la técnica del pseudo-elemento, la herramienta aplica un fondo en degradado al elemento exterior y usa ::before (o background-clip: padding-box) para enmascarar el área de contenido interna, dejando visible solo el anillo del borde.

Las paradas de color se almacenan como un array JavaScript de pares {color, position}. Cuando eliges colores o mueves el deslizador de ángulo, la herramienta reconstruye la cadena linear-gradient() uniendo las paradas con comas y anteponiendo el ángulo: linear-gradient(45deg, #ff0080 0%, #7928ca 100%). Esa cadena se interpola tanto en el CSS de vista previa como en la caja de código. El deslizador de ángulo usa un rango de 0 a 360 grados con rotación visual de flecha SVG para retroalimentación de orientación.

Nada sale de tu navegador. La generación de cadena de degradado, el almacenamiento de colores, la representación de vista previa y la copia al portapapeles ocurren todo en JavaScript en tu dispositivo. No se hace ninguna solicitud de red; ningún análisis rastrea qué colores eliges. La herramienta no tiene backend más allá del HTML estático y JavaScript servidos una vez en la primera carga. Refresca la página y tus colores seleccionados y ángulo se han ido a menos que hayas copiado el CSS primero.

Breve historia de los bordes y degradados CSS

• Bordes CSS 1, 1996.La primera especificación CSS (CSS 1, diciembre de 1996) define border-style, border-width y border-color, soportando solo colores sólidos y los ocho estilos de borde (none, dotted, dashed, solid, double, groove, ridge, inset, outset). Sin soporte de degradado, una elección arquitectónica que persiste durante 16 años.
• CSS linear-gradient se envía, 2008 a 2011.WebKit introduce -webkit-gradient() en 2008, seguido por el linear-gradient() estandarizado en CSS Image Values and Replaced Content Module Level 3 (2011). Los degradados se convierten en ciudadanos CSS de primera clase para fondos, pero no para bordes. Los diseñadores quieren inmediatamente bordes en degradado; la especificación no se acomoda.
• border-image llega, 2012.CSS Backgrounds and Borders Module Level 3 (CR junio de 2012) define border-image con soporte completo de navegador para 2014. Permite que los bordes usen cualquier imagen, incluyendo degradados CSS. El detalle: border-image sobrescribe border-radius, así que los bordes en degradado redondeados permanecen imposibles solo con esta técnica.
• Patrón de solución de pseudo-elemento emerge, 2013 a 2015.CSS-Tricks y recursos similares publican soluciones usando pseudo-elementos ::before con fondos en degradado y trucos background-clip: padding-box. El «borde en degradado redondeado» se vuelve resoluble pero requiere comprender las intricacies del modelo de caja. Para 2015, el patrón está extendido en la documentación de sistemas de diseño.
• conic-gradient aterriza, 2018 a 2021.CSS conic-gradient() (Chrome 69, septiembre 2018; Firefox 83, noviembre 2020; Safari 12.1, marzo 2019) habilita degradados de barrido circular, ideales para efectos de «anillo de carga» con bordes en degradado. Combinados con animación, los bordes conic-gradient crean los patrones de resplandor rotatorio populares en los lanzamientos de productos de IA en 2023.
• mask-composite desbloquea soluciones más limpias, 2020 a 2024.CSS Masking Module Level 1 (2014) y soporte mask-composite en navegadores modernos (2020+) permite bordes en degradado de un solo elemento sin pseudo-elementos: capa un fondo en degradado y enmascara todo excepto el anillo exterior vía operaciones compuestas. Para 2024 este es el enfoque de producción más limpio, aunque las soluciones de pseudo-elemento permanecen compatibles con navegadores más antiguos.

Flujos del mundo real

• Acentos sutiles de componente de tarjeta.Las tarjetas de panel modernas (piensa Stripe, Linear, Vercel) usan bordes en degradado de 1 a 2 píxeles en esquemas de color de dos o tres tonos para añadir interés visual sin pesadez. El degradado es generalmente sutil: 10% a 20% de opacidad, bajo contraste, mayormente escala de grises con un toque de color de marca. Esto es suficiente para diferenciar tarjetas de un fondo plano y señalar interactividad.
• Destacados de funciones premium.Las tablas de precios SaaS usan bordes en degradado vívidos (a menudo oro a púrpura o arcoíris) en el plan «Pro» o «Recomendado» para elevarlo visualmente. El patrón funciona porque atrae la vista a través del color y movimiento (si animado) sin requerir etiquetas de insignia. Linear, Notion, Figma y la mayoría de las páginas de precios SaaS modernas usan este patrón exacto.
• Efectos neón y de brillo.Las estéticas cyberpunk, synthwave y UI de juegos combinan bordes en degradado con box-shadow para un aspecto de tubo neón. El borde proporciona la transición de color, la sombra proporciona el florecimiento. Patrón común: border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 más box-shadow: 0 0 20px rgba(255,0,128,0.5) en el mismo elemento.
• Identidad visual de productos de IA.La ola 2023-2024 de herramientas de IA (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) convergió en bordes en degradado multi-color animados como firma visual para «la IA está pensando» o campos de entrada en espera de procesamiento de IA. Normalmente degradados cónicos rotatorios o degradados lineales cambiantes en un bucle de 4 a 6 segundos. Se convierte en taquigrafía para «inteligente / generativo» en UX moderna.
• Pulido de estados de hover y focus.Los botones e inputs que cambian de borde sólido en estado de reposo a borde en degradado en hover o focus se sienten premium e intencionales. La transición entre colores puede animarse con transiciones CSS en background-position si el degradado se extiende más allá del área visible (background-size: 200% 100% con una animación deslizante).
• Expresión del color de marca.Los sistemas de marca con logotipos multi-color (Instagram, Slack, Discord) a menudo usan bordes en degradado para extender su identidad en componentes UI. Una tarjeta con el degradado de marca como borde establece continuidad visual con el logotipo. Para páginas de marketing SaaS, esta es una de las formas más baratas de hacer que un componente genérico se vea «de marca».

Trampas comunes y lo que significan

• border-image ignora border-radius.La confusión más común: usar border-image: linear-gradient(...) junto con border-radius produce esquinas cuadradas. border-image toma el control completo de la representación del borde y la propiedad radius no tiene efecto en el resultado pintado. Para obtener bordes en degradado redondeados, usa la técnica del pseudo-elemento o el enfoque moderno mask-composite, no border-image.
• La técnica del pseudo-elemento requiere padding-box.La solución estándar usa background en el elemento exterior y una superposición interna vía ::before. Detalle crítico: la superposición interna necesita background-clip: padding-box para detenerse en el borde del padding, dejando el área del borde visible. Saltarse esta propiedad clip resulta en el degradado siendo completamente cubierto por la superposición, sin borde visible.
• Animar bordes en degradado es costoso para la GPU.Los bordes en degradado animados (el patrón «shimmer de IA») funcionan transicionando background-position en un gran degradado. Aunque las GPU modernas manejan esto bien, aplicarlo a muchos elementos simultáneamente (e.g., cada tarjeta en una página) reduce las tasas de cuadros notablemente en dispositivos de gama baja. Usa los bordes en degradado animados con moderación: uno o dos elementos «héroes» por página, no a nivel de sitio.
• Conflicto de color en modo oscuro.Un borde en degradado diseñado para un fondo claro a menudo se ve mal en fondos oscuros. Los degradados blancos puros se vuelven invisibles; los colores vibrantes se ven sobresaturados. Para diseños de doble tema, define paradas de color de degradado separadas para los modos claro y oscuro vía propiedades personalizadas CSS o media queries. Reduce la saturación y ajusta el matiz para mantener la armonía visual con el tema circundante.
• Los bordes de bajo contraste fallan en accesibilidad.Los bordes en degradado sutiles que se ven elegantes pueden fallar el WCAG 2.1 SC 1.4.11 Contraste No Textual (mínimo 3:1) para componentes UI que transmiten estado. Si el borde en degradado es el único indicador visual de los límites de un botón o la seleccionabilidad de una tarjeta, asegura un contraste adecuado con el fondo. Para bordes puramente decorativos en elementos ya visibles, el contraste es menos crítico pero todavía vale la pena verificar.
• Internet Explorer y Edge antiguo no soportan nada útil.IE 11 (retirado en junio de 2022) y Edge pre-Chromium (2015 a 2019) carecen de border-image confiable para degradados, mask-composite y varias técnicas de pseudo-elemento. Para estos navegadores heredados, repliega graciosamente a un borde sólido usando el color medio del degradado. Los navegadores modernos cubren más del 99% de los usuarios en 2026, pero los fallbacks heredados siguen siendo importantes para software empresarial.

Privacidad: todo se ejecuta en tu navegador

Las herramientas generadoras CSS vienen en dos sabores: páginas HTML simples ejecutando JavaScript del lado del cliente (privadas, rápidas) y editores en la nube que guardan tus proyectos (colaborativos pero con compensaciones de privacidad). Esta herramienta es del primer tipo. Tus colores seleccionados, tu ángulo, tu CSS generado: todo permanece en tu sesión del navegador. Refresca la página y el estado se va a menos que hayas copiado el CSS primero. Ningún servidor almacena tus elecciones de degradado, ningún análisis rastrea qué combinaciones de colores probaste, y no se necesita cuenta.

La propiedad de privacidad importa principalmente para trabajo de diseño propietario. Un estudio prototipando combinaciones de degradados para un rediseño de marca confidencial, un desarrollador trabajando en los acentos UI de un producto no anunciado, o un diseñador iterando en una paleta de campaña: cualquier contexto donde la elección de color o el historial de iteración podría filtrar información sobre el trabajo. Con esta herramienta, no hay nada capturado porque nada se envía. Abre la pestaña de Red del navegador y verás cero solicitudes salientes durante el uso; solo la carga inicial de la página obtiene el HTML y JavaScript.

Cuándo otra herramienta es la opción correcta

• SVG para formas de borde complejas.Para bordes en degradado no rectangulares (redondeados con muescas, bordes festoneados, formas irregulares personalizadas), SVG con linearGradient o radialGradient aplicado a un atributo stroke proporciona control total. Los bordes en degradado CSS funcionan para rectángulos y rectángulos redondeados; SVG maneja todo lo demás. Úsalos juntos: SVG para contornos de forma decorativos, CSS para componentes UI estándar.
• Photoshop para imágenes en degradado estáticas.Si el borde en degradado está en una imagen héroe estática o banner que no cambiará, diseñarlo en Photoshop, Figma o Sketch y exportarlo como PNG o WebP puede ser más simple que mantener CSS. La imagen escala como parte del pipeline de activos de la página. Los bordes en degradado CSS son para elementos dinámicos (tarjetas, botones, componentes) que necesitan renderizar a cualquier tamaño.
• Bibliotecas de componentes para consistencia del sistema de diseño.Tailwind UI, shadcn/ui, Radix y otras bibliotecas de componentes envían componentes de tarjeta y botón pre-estilados con variantes de borde en degradado opcionales. Para proyectos que ya usan estas bibliotecas, aplicar la variante de la biblioteca es más rápido que rodar CSS a mano. Los bordes en degradado rodados a mano son útiles para diseños puntuales o proyectos aún no comprometidos con una biblioteca de componentes.
• Canvas o WebGL para efectos animados multi-capa.Para efectos de degradado altamente animados y multi-capa (sistemas de partículas, simulaciones de fluidos, arte generativo), Canvas 2D o WebGL proporciona control por píxel que CSS no puede igualar. La compensación es la complejidad de implementación y accesibilidad (el contenido canvas es invisible para lectores de pantalla). Para bordes en degradado decorativos en componentes UI estándar, CSS es la elección correcta; para efectos visuales, considera enfoques basados en canvas.

Más preguntas frecuentes

¿Puedo usar más de dos colores en un borde en degradado?

Sí. CSS linear-gradient() acepta paradas de color ilimitadas: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) crea un degradado de tres colores transicionando a través de naranja en el medio. Añade tantas paradas como quieras, cada una con una posición opcional. Para degradados multi-color complejos (efecto arcoíris), distribuye las paradas uniformemente: 0%, 16.7%, 33.3%, 50%, 66.7%, 83.3%, 100%.

¿Cómo creo un borde en degradado arcoíris o cónico?

Para degradados cónicos (de barrido), usa conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) como fondo del elemento exterior con la técnica de enmascarado padding-box del pseudo-elemento. Para un efecto rotatorio (popular en estados de carga de productos de IA), anima --angle vía CSS Houdini o usa @property --angle con una animación de rotación de 360 grados. El resultado es un barrido de color suave alrededor del borde.

¿Puedo usar propiedades personalizadas CSS para bordes en degradado conscientes del tema?

Sí, y es el enfoque recomendado para sistemas de diseño. Define los colores de degradado como propiedades personalizadas CSS (--gradient-start, --gradient-end) y úsalos en tu declaración de degradado: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Sobreescribe las variables en media queries de modo oscuro o clases de tema. Un archivo CSS maneja tanto temas claros como oscuros vía redefinición de variables.

¿Esto funciona en navegadores antiguos como Internet Explorer?

Internet Explorer 11 (oficialmente retirado por Microsoft en junio de 2022) tenía soporte parcial de border-image pero renderizado de degradado no confiable, y sin mask-composite. Los navegadores modernos (Chrome 88+, Firefox 78+, Safari 14+) soportan totalmente ambas técnicas. Si debes soportar IE, proporciona un fallback de color sólido usando el color medio del degradado: declara border: 3px solid #888; antes de la regla de degradado, e IE usará eso mientras los navegadores modernos aplican el degradado.

¿Hay una forma de una sola propiedad de hacer bordes en degradado?

Aún no en CSS estandarizado. Propuestas modernas (borrador del CSS Backgrounds and Borders Module Level 4) incluyen la propiedad border-color aceptando degradados directamente, pero las implementaciones de navegador aún no son estables. La aproximación actual más cercana es la técnica mask-composite que usa un solo elemento pero todavía requiere tres declaraciones CSS. Esperemos que para 2027 o 2028, border: 3px solid linear-gradient(...) simplemente funcione.

¿Por qué mi borde en degradado se ve diferente en Safari?

Safari históricamente retrasa a Chrome y Firefox en paridad de características CSS, especialmente para valores mask-composite y algunos casos límite de background-clip. Prueba en Safari explícitamente. Si la técnica del pseudo-elemento falla en Safari, cambia a border-image (que funciona universalmente pero pierde border-radius), o usa prefijos específicos de Safari: -webkit-mask-composite puede ser requerido para versiones antiguas de Safari. iOS Safari a menudo necesita el prefijo incluso en versiones 2024.