Generador de degradado CSS

Acerca de los degradados CSS

Los degradados CSS permiten mostrar transiciones fluidas entre dos colores o más, sin usar imágenes. Los genera el navegador, lo que significa que se adaptan perfectamente a cualquier resolución y no añaden ningún peso a la carga de página. Los degradados se definen mediante la propiedad background con las funciones linear-gradient() o radial-gradient().

Una breve historia de los gradientes CSS

Los gradientes CSS están definidos en el CSS Image Values and Replaced Content Module Level 3, mantenido por el W3C CSS Working Group y editado por Tab Atkins Jr. y Elika J. Etemad entre otros. El First Public Working Draft fue el 12 de julio de 2011; la spec alcanzó Candidate Recommendation el 17 de abril de 2012, cerrando la sintaxis moderna sin prefijo, incluyendo la convención de que 0deg apunta hacia arriba y to right equivale a 90deg. Orden de envío de los navegadores: WebKit fue el primero por mucho, con -webkit-gradient() usable en Safari 4 (2009) con una sintaxis cargada de llamadas a función. Firefox envió -moz-linear-gradient() en Firefox 3.6 el 21 de enero de 2010; Internet Explorer 10 envió las formas sin prefijo en 2012; la sintaxis sin prefijo se estabilizó en todos los motores principales a finales de 2013. conic-gradient() fue especificado más tarde en CSS Images Level 4, Lea Verou redactó la propuesta en 2011, Tab Atkins la añadió a la spec en 2012, y el envío nativo llegó en Chrome 69 (4 de septiembre de 2018), Safari 12.1 (25 de marzo de 2019) y Firefox 83 (17 de noviembre de 2020). En 2026 puedes escribir background: linear-gradient(...) y background: radial-gradient(...) con confianza, sin prefijos ni fallbacks, para cualquier navegador que valga la pena soportar.

linear-gradient: ángulos, lados y la sutileza diagonal

La gramática formal es linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convención de ángulos a menudo tropieza a los desarrolladores porque difiere de la convención SVG/canvas. 0deg equivale a to top, la línea del gradiente apunta hacia arriba, así que el último color aparece arriba. 90deg equivale a to right. 180deg equivale a to bottom (el defecto si no se da dirección). 270deg equivale a to left. 135deg es la diagonal canónica, de arriba-izquierda a abajo-derecha, la dirección de gradiente más común en diseño web moderno. Los ángulos crecientes rotan en sentido horario desde arriba, opuesto a la convención matemática (donde 0 está a la derecha y los ángulos crecen en antihorario) y opuesto al <linearGradient> de SVG. Una sutileza útil: to right y 90deg son equivalentes solo en cajas cuadradas. En una caja no cuadrada, to top right produce una línea de gradiente exactamente perpendicular a la diagonal desde la esquina inferior izquierda, lo que significa que el gradiente toca la esquina limpiamente, mientras que 45deg es siempre literalmente 45 grados independientemente del ratio de aspecto. Para la mayoría de los fondos de hero esta distinción no importa; para diseños alineados con precisión sí puede.

radial-gradient: formas, tamaños y posición

La gramática es radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Dos valores de forma: circle (círculo perfecto escalado a la caja) y ellipse (por defecto, estirado al ratio de aspecto de la caja). El tamaño puede ser una de cuatro palabras clave de extensión o longitudes/porcentajes explícitos. closest-side: la forma final toca el lado más cercano. closest-corner: la forma final pasa exactamente por la esquina más cercana. farthest-side: la forma final toca el lado más lejano. farthest-corner (el defecto): la forma final pasa por la esquina más lejana. La cláusula at <position> mueve el centro, at top left, at 30% 70%, etc. El centro por defecto es at center center. Los gradientes radiales son cómo haces efectos de foco, resplandores suaves, fondos «viñeta» donde los bordes se oscurecen hacia el negro y fondos de insignia circulares. Son notablemente menos comunes que los gradientes lineales en uso de producción 2026, la mayoría de los fondos «gradiente» que ves en landing pages son lineales, pero son indispensables para los casos donde el lineal no llega.

Color stops, el corazón de un gradiente

Un color stop es un valor de color con una posición opcional a lo largo de la línea del gradiente. linear-gradient(red, blue) coloca rojo en 0% y azul en 100%, con una interpolación suave entre ellos. linear-gradient(red 0%, yellow 50%, blue 100%) añade un stop amarillo en el medio. Los stops con posiciones explícitas pueden colocarse en cualquier lugar de 0% a 100%, y los stops sin posiciones explícitas se distribuyen uniformemente entre sus vecinos de posición explícita. Hard color stops, dos stops en la misma posición, como linear-gradient(red 50%, blue 50%), producen una transición instantánea en lugar de una mezcla suave. Este es el truco detrás de cada patrón CSS: rayas, tableros de ajedrez, puntos, todos construidos a partir de pilas de gradientes con hard stops. Color interpolation hints (CSS Images Level 4): insertar un porcentaje suelto entre dos stops sesga dónde cae el punto medio de la interpolación. linear-gradient(red, 25%, blue) desplaza el punto medio perceptual al 25% en lugar del 50% por defecto, útil para ponderar sutilmente un color sobre el otro. Interpolación moderna en espacio de color (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) interpola en el espacio de color perceptualmente uniforme Oklab en lugar de sRGB con codificación gamma, produciendo transiciones más suaves a través del medio sin la «zona muerta» gris turbia que la interpolación sRGB produce entre colores complementarios de alta croma. El defecto sigue siendo in oklab (o in srgb en navegadores más antiguos), para gradientes hechos a mano puedes optar.

Espacios de color modernos, por qué los gradientes oklch se ven mejor

Durante dos décadas, cada gradiente CSS interpolaba valores de color en sRGB, el espacio de color con codificación gamma con el que creció la web. La interpolación sRGB tiene un modo de fallo bien conocido: los gradientes entre colores complementarios de alta croma (rojo ↔ verde, azul ↔ amarillo, magenta ↔ cian) pasan por un punto medio gris turbio. Prueba linear-gradient(red, green) en sRGB y el medio es marrón, no el verde oliva brillante que tus ojos esperan. Oklab (Björn Ottosson, diciembre de 2020) es un espacio de color perceptualmente uniforme diseñado específicamente para arreglar esto. OKLCH es la forma cilíndrica de Oklab, las tres coordenadas son Lightness (0-100%), Chroma (0+) y Hue (0-360°). Los gradientes en OKLCH se mantienen perceptualmente suaves a lo largo de toda la transición, con el brillo rampando uniformemente y el matiz rotando predeciblemente a través de la rueda de color. La especificación CSS Color Module 4 añadió <color-interpolation-method> como parámetro de las funciones de gradiente: linear-gradient(in oklch, red, blue). El soporte de navegadores alcanzó baseline a mediados-finales de 2023 (Safari 16.4 marzo de 2023, Chrome 111 marzo de 2023, Firefox 113 mayo de 2023). Para gradientes usados en sistemas de diseño en producción, la opción OKLCH es cada vez más la elección correcta; este generador emite actualmente gradientes con sRGB por defecto y el toggle OKLCH está en la hoja de ruta.

Rendimiento, los gradientes son baratos pero no gratis

Los gradientes CSS están acelerados por GPU en cada navegador moderno, lo que los hace dramáticamente más rápidos que las imágenes bitmap en mosaico para la mayoría de los casos de uso, sin petición HTTP, sin decodificación, independientes de resolución vectorial, instantáneamente recoloreables a través de variables CSS. Los compromisos a conocer: el coste de paint escala con los píxeles tocados y la complejidad del gradiente; los gradientes están entre las cosas más caras que un navegador puede pintar, y apilar muchas capas de gradiente sobre un hero a pantalla completa puede costar frames en GPUs de gama baja. Animar colores de gradiente dispara un repaint completo en cada frame, mucho más caro que animar transform u opacity. El fix moderno es usar propiedades personalizadas registradas con @property (Houdini Properties and Values API), que deja al navegador interpolar valores de color en el hilo compositor en lugar del hilo principal; soportado en Chrome 78+ (nov 2019), Safari 16.4+ (mar 2023), Firefox 128+ (jul 2024). La alternativa tradicional más barata es animar background-position en un gradiente fijo, una verdadera animación solo-compositor que corre a 60fps en todas partes. La heurística general de rendimiento: si tu página tiene un solo gradiente estático, nunca lo notarás; si estás apilando cinco capas de gradiente animadas en cada tarjeta de una lista larga, perfílalo antes de enviar.

Donde los gradientes se ganan su lugar

• Fondos de sección hero. Gradientes suaves con colores de marca detrás del título de la página, a menudo con overlays radiales sutiles para profundidad atmosférica. Stripe, Linear y la mayoría de las landing pages SaaS modernas se apoyan en esto.
• Estilizado de botones. Gradientes sutiles en botones CTA primarios añaden profundidad táctil que los colores sólidos planos no tienen. Añade un gradiente de estado hover ligeramente más oscuro y el botón se siente vivo.
• Overlays de imagen para legibilidad de texto. Un linear-gradient vertical desvaneciéndose de transparente arriba a oscuro abajo, superpuesto a una imagen hero con texto blanco en la zona oscura, hace el texto legible independientemente de cómo se vea la foto.
• Fondos de tarjetas. Gradientes sutiles en fondos de tarjetas añaden profundidad sin box-shadow pesado.
• Esqueletos de carga e indicadores de progreso. El esqueleto shimmer clásico es un gradiente lineal con blanco semi-transparente moviéndose a través de un fondo gris, animado vía background-position.
• Glassmorphism y estilizado UI moderno. El efecto vidrio esmerilado popularizado por macOS Big Sur e iOS, un fondo semi-transparente con backdrop-filter blur, a menudo superpuesto con un gradiente sutil para el efecto de resaltado.
• Parecidos a mesh-gradients. Los mesh gradients CSS reales aún no son estándar (CSS Images Level 5 eventualmente los añadirá), pero apilar 3-5 grandes gradientes radiales con colores semi-transparentes produce un efecto de mesh-gradient convincente hoy.

Alcance honesto: qué hace y qué no hace este generador

Esta herramienta genera gradientes CSS lineales y radiales con vista previa en vivo, ángulo configurable (para lineal) o posición (para radial), y cualquier número de color stops con posiciones. Emite la sintaxis moderna sin prefijo. Lo que esta herramienta no hace actualmente, que generadores más elaborados manejan: gradientes cónicos (la variedad rotativa-alrededor-de-un-centro, usada para gráficos de tarta, soles y ruedas de color), ver el CSS Pattern Generator de Absolutool para algunos ejemplos de patrones cónicos; gradientes repetitivos (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) para rayas y rellenos estilo patrón, también manejado en el CSS Pattern Generator; toggle de interpolación OKLCH / Oklab (el espacio de color perceptualmente uniforme moderno), emite actualmente por defecto sRGB; sintaxis de color hint para sesgar el punto medio entre stops; keyframes de animación multi-stop. Para la mayoría de los gradientes de producción (fondos de hero, estilos de botón, efectos de overlay), lineal + radial cubre el caso de uso; para los casos más exóticos, el CSS Pattern Generator es la herramienta complementaria correcta.

Preguntas frecuentes

¿Los degradados CSS están admitidos por todos los navegadores?

Sí. Los degradados CSS están admitidos por todos los grandes navegadores desde 2013, con más del 98 % de cobertura mundial. Ya no necesitas prefijos de proveedor como -webkit- para uso moderno.

¿Qué ángulo usar para un degradado diagonal?

135 grados crea una diagonal superior izquierda hacia inferior derecha, la más habitual. 45 grados parte de inferior izquierda hacia superior derecha. 90 grados va de izquierda a derecha, y 180 grados de arriba a abajo.

¿Puedo usar más de dos colores?

Por supuesto. Haz clic en «Añadir un punto» para añadir hasta 8 puntos de color. Puedes controlar cada color y su posición a lo largo del degradado. Los degradados multipunto crean efectos visuales más ricos y dinámicos.

¿Por qué no hay opción de gradiente cónico?

Los gradientes cónicos (la variedad rotativa-alrededor-de-un-centro, usada para gráficos de tarta, soles y ruedas de color) son un problema de diseño diferente a los gradientes lineales y radiales, los parámetros son ángulos alrededor de un centro en lugar de posiciones a lo largo de una línea. Para ejemplos y patrones de gradiente cónico, usa el CSS Pattern Generator de Absolutool, que maneja los casos más exóticos (cónico, repeating-linear, repeating-conic) para rellenos estilo patrón. Este generador se centra en los casos linear+radial que cubren la mayor parte de los gradientes hero-y-botón de producción.

¿Son los gradientes CSS más rápidos que los fondos de imagen?

Para la mayoría de los casos, sí, un gradiente CSS elimina una petición HTTP, una pasada de decodificación y el envío de assets multi-resolución requerido para pantallas retina. El gradiente es también perfecto en vector a cualquier zoom y trivialmente recoloreable vía variables CSS. Compromisos: los gradientes son pintados en GPU pero el coste de paint escala con el área de píxeles y la complejidad de stops; apilar muchas capas de gradiente sobre un hero a pantalla completa puede costar frames en GPUs de gama baja. Para animación, anima background-position (solo compositor, barato) en lugar de los color stops del gradiente (repaint completo, caro). Gradientes estáticos únicos en tarjetas o secciones hero, nunca perceptible.

¿Se envían mis datos a algún sitio?

No. La generación corre enteramente en tu navegador, selectores de color, slider de ángulo y generación de código CSS todos corren localmente. No hay peticiones salientes cuando usas los controles. El CSS generado es tuyo para pegarlo donde quieras.

Herramientas relacionadas