¿Cómo usar esta herramienta?
- Elija lineal, radial o cónico y ajuste el ángulo.
- Edite los stops de color — hex, RGB, posición. Botón Hard-stop para bandas nítidas.
- Copie la salida como CSS puro, utility Tailwind v4, estilo inline, mixin SCSS o SVG inline.
¿Qué hace el generador de gradiente?
El generador construye degradados CSS visualmente: elija entre degradado lineal, radial y cónico, coloque stops de color a cualquier posición y decida el espacio de color de interpolación. La vista previa live muestra dos rectángulos lado a lado — uno en el espacio actual, otro en sRGB para comparación. Así ve de inmediato si un degradado en OKLCH realmente pasa más saturado que en sRGB.
La salida viene en cinco formatos: CSS puro para stylesheets clásicos, una utility Tailwind v4 con modifier de espacio de color correcto, un atributo style inline, un mixin SCSS y un snippet SVG inline para plantillas de correo. Cada formato se genera directamente en el navegador — sin build tool, sin ida y vuelta a un servidor.
¿Por qué el espacio de color es tan importante en los gradientes?
En la transición entre dos colores, el navegador debe calcular los tonos intermedios. En sRGB aparecen a menudo «zonas muertas» grises o parduzcas entre colores complementarios fuertes — por ejemplo, entre azul y amarillo. La razón: sRGB no es un espacio de color perceptualmente uniforme. Distancias numéricas iguales no parecen iguales para el ojo.
OKLCH (Oklab en forma polar, descrito en CSS Color Module Level 4) resuelve el problema. Lightness (L) y Chroma (C) están calibrados para que se conserve una saturación constante a lo largo del degradado. El mismo argumento vale para OKLab, que describe el mismo espacio en cartesianas. HSL parece a primera vista perceptualmente uniforme, pero se cae en las zonas oscuras y claras.
¿Cómo funciona la vista previa comparativa A/B?
Ambos rectángulos de vista previa usan exactamente los mismos stops y el mismo ángulo — la única diferencia es el valor en la propiedad CSS linear-gradient(in <space>, …). A la izquierda está el espacio de interpolación elegido (por defecto: OKLCH), a la derecha sRGB como referencia. Si los stops tienen tonos cercanos, ambos rectángulos son casi idénticos. En cuanto combina colores complementarios, el degradado sRGB cae en un medio embarrado mientras OKLCH mantiene la saturación.
| Espacio | Fortaleza | Debilidad |
|---|---|---|
| OKLCH | perceptualmente uniforme, hue-estable | algo más de tecleo |
| OKLab | mismo espacio, cartesiano | sin modo longer hue propio |
| sRGB | universal, navegadores antiguos | «zonas grises» en transiciones complementarias |
| HSL | mandos intuitivos (Hue/Sat/Light) | se rompe en lo muy claro/oscuro |
¿Cómo se usan correctamente los gradientes de Tailwind v4?
Tailwind v4 ha ampliado notablemente la API de gradiente respecto a v3. La utility de dirección se llama ahora bg-linear-to-r (en lugar de bg-gradient-to-r), y existen bg-radial, bg-radial-[<position>] así como bg-conic y bg-conic-[<from>]. Los stops de color se siguen poniendo con from-, via- y to-. La diferencia decisiva: Tailwind v4 interpola por defecto en OKLab — es decir, ya en un espacio perceptualmente uniforme, lo que arregla automáticamente el 90 % de los problemas de «medio gris».
Si necesita otro espacio de color (por ej. OKLCH para efectos arcoíris o sRGB para precisión pixel), añada un modifier a la utility de dirección: bg-linear-to-r/oklch, bg-conic/hsl-longer, bg-radial/srgb. Ese modifier compila entonces a linear-gradient(to right in oklch, …) en el CSS final (CSS Images-4 exige que ángulo e interpolación de color estén en el mismo segmento pre-stop, separados por espacio, con una sola coma antes de los stops). La salida Tailwind v4 de esta herramienta añade el modifier automáticamente en cuanto elija un espacio distinto a sRGB — si no, solo recibirá la dirección sin cláusula de espacio de color.
¿Para qué los hard-stops y cómo se construyen?
Un hard-stop no es un degradado, sino una transición nítida en una sola posición. Lo crea haciendo que dos stops de color aterricen exactamente en la misma posición porcentual — el navegador no tiene espacio para un color intermedio y corta nítido. Con ello construye:
- Fondos de rayas.
linear-gradient(90deg, #FF5733 0%, #FF5733 33%, #FFD166 33%, #FFD166 66%, #7C2D12 66%, #7C2D12 100%)da tres bandas del mismo ancho. - Barras de carga. Un hard-stop entre «lleno» y «vacío» se desplaza animado vía custom property.
- Bandas decorativas. Skeleton loaders o cabeceras color-block para layouts editoriales.
El botón «Transición nítida» junto a cada stop duplica la entrada actual en la misma posición. A continuación arrastra uno de los dos colores a un nuevo valor — la transición permanece nítida.
¿Cuál es la diferencia entre shorter hue y longer hue?
En espacios de color polares (OKLCH, HSL), todos los valores de hue están en un círculo. Entre dos puntos de hue hay siempre dos caminos: el arco corto y el largo. CSS ofrece cuatro métodos: shorter hue (por defecto, más corto), longer hue (más largo), increasing hue (creciente mod 360) y decreasing hue (decreciente mod 360).
Para la mayoría de los degradados, shorter hue es correcto — no quiere que una transición azul-verde pase de pronto por el rojo. Para gradientes cónicos que deban renderizar un spinner arcoíris o un color wheel, necesita longer hue, porque el camino «corto» solo cubriría un arco de hue estrecho. El selector «Dirección de hue» en la herramienta se activa automáticamente en cuanto cambia a cónico o OKLCH.
¿Qué casos de uso existen?
Fondos hero. Un degradado lineal sutil de off-white a un acento cálido da profundidad a las landing pages sin distraer. OKLCH mantiene la saturación a lo largo del degradado — sin medio gris entre el naranja de marca y el arena.
Highlights de tarjetas. Los gradientes radiales colocan un halo de luz suave detrás de las tarjetas — ideal para hover states o acentos de atención. Con radial-gradient(circle closest-side, …) el highlight queda centrado.
Spinners de carga. Los gradientes cónicos con longer hue y una segunda posición de stop alpha-fading forman arcos de carga — de acento pleno a transparente. Animado vía CSS rotate(), el conjunto gira regularmente.
Tokens de design system. La salida mixin SCSS empaqueta el gradiente como token reutilizable. Los componentes consumen @include app-gradient;, y al cambiar el espacio de interpolación solo cambia el mixin — todos los consumidores siguen silenciosamente.
Plantillas de correo. Outlook y vistas antiguas de Gmail no suelen renderizar gradientes CSS. El snippet SVG inline es más universal — <linearGradient> en SVG es admitido por cualquier cliente de correo que permita imágenes.
Preguntas frecuentes
¿Cómo se crea un gradiente CSS?
Abra el editor en el navegador, elija el tipo de gradiente (lineal, radial, cónico), ajuste el ángulo y coloque stops de color. El código CSS se genera en vivo. El botón Copiar transfiere el snippet a su stylesheet.
¿Qué es OKLCH y por qué es mejor que RGB?
OKLCH es un espacio de color perceptualmente uniforme. Al interpolar entre dos colores no surge una zona gris intermedia como en sRGB — el degradado permanece visiblemente saturado. La ventana de vista previa A/B muestra la diferencia directamente.
¿Cómo uso gradientes en Tailwind v4?
Tailwind v4 ofrece bg-linear-to-r, bg-radial, bg-conic y las clases auxiliares from-, via-, to-. La interpolación por defecto es OKLab — con el modifier /oklch o /hsl el espacio de color se define explícitamente.
¿Funcionan los gradientes CSS en correos?
Muchos clientes de correo (Outlook, modos Gmail antiguos) no renderizan linear-gradient(). La herramienta entrega por eso también un snippet SVG inline como fallback — <linearGradient> SVG corre fiablemente en casi todos los clientes de correo.
¿Qué es un hard-stop en un gradiente CSS?
Dos stops de color en la misma posición generan una transición nítida sin degradado. Con eso se construyen rayas, barras de carga o fondos color-block. El botón «Transición nítida» duplica el stop seleccionado.
¿Qué significa longer hue en un gradiente cónico?
Los espacios de color polares (OKLCH, HSL) ofrecen dos caminos alrededor del círculo cromático: shorter hue (más corto) y longer hue (más largo). Para spinners arcoíris y color-wheels se toma longer hue — si no, el navegador hace saltar el arco.
¿La herramienta guarda mis paletas de colores?
No. Todas las entradas se quedan en la pestaña del navegador, nada se guarda ni se sube. Al recargar, la herramienta está vacía. Para conservar paletas, copie la salida en su propio stylesheet o en un design token.
¿Qué navegadores admiten OKLCH?
OKLCH es CSS Color Module Level 4 y está disponible desde Chrome 111, Firefox 113 y Safari 16.4 (todos en 2023). Eso cubre alrededor del 95 % de los navegadores mundiales. Los motores más antiguos caen silenciosamente — el stop hex de fallback queda visible.
¿Qué herramientas de color están relacionadas?
Otras herramientas para CSS-authoring y gestión de color:
- Conversor Hex a RGB — convertir códigos hex a RGB, HSL y OKLCH.
- Comprobador de contraste — comprobar contraste WCAG AAA entre dos colores.
- Optimizador SVG — reducir la salida SVG sin pérdida de calidad.
- Formateador CSS — formatear limpiamente CSS crudo o minificado.
Última actualización: