Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Construye un degradado lineal, radial o cónico y emite el CSS, incluida la cláusula de interpolación `in oklch` que decide qué pasa entre las paradas. Las mismas paradas se dibujan siempre una segunda vez en sRGB debajo, porque el argumento a favor de interpolar en un espacio perceptual es visual, y cuatro centímetros de degradado lo hacen más rápido que un párrafo.
Las mismas paradas en sRGB, para comparar. Si el centro de esta tira se ve lavado al lado de la de arriba, eso es el espacio de interpolación haciendo su trabajo: una recta por el cubo sRGB entre dos matices opuestos pasa cerca del eje neutro.
Recorre la rueda de matices, así que el punto medio conserva su croma. Es el valor por defecto, y la razón de que CSS incorporara esta sintaxis.
Paradas
- 0%
- 100%
Preajustes
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);La cláusula in oklch necesita un navegador de 2023 o posterior. Los motores más viejos tiran la declaración entera en vez de recurrir a una alternativa, así que acompáñala de un degradado sRGB normal en una declaración anterior si los soportas.
Cómo se usa
Elige el tipo y luego el ángulo
El lineal viaja en línea recta, el radial se extiende desde un punto, el cónico barre alrededor de uno. El ángulo aplica al lineal y al cónico; el radial toma una forma y un centro en su lugar.
Coloca las paradas
Cada parada tiene un color y una posición de 0 a 100 %. Dos es el mínimo; añadir una redistribuye las posiciones uniformemente, y después puedes moverlas. Los preajustes son una forma rápida de ver cómo se comportan tres o cuatro paradas.
Elige el espacio de interpolación: esta es la decisión real
OKLCH mantiene el croma por el medio, que es lo que impide que de azul a amarillo se ponga gris a mitad de camino. OKLab toma el camino perceptual más corto y es correcto cuando las dos paradas están cerca en tono. sRGB es el comportamiento heredado, y merece elegirse a propósito si necesitas que los navegadores antiguos den el mismo resultado que los nuevos.
En un espacio polar, decide en qué sentido dar la vuelta
OKLCH, LCH y HSL son polares, así que hay dos arcos entre dos tonos cualesquiera. `shorter` es el valor por defecto y normalmente lo que quieres; `longer` convierte un degradado de dos paradas en un arcoíris, que de vez en cuando es exactamente el efecto.
Copia el valor o la declaración entera
El valor va en un `background-image` existente; la declaración está lista para pegarse por sí sola.
Preguntas frecuentes
¿`in oklch` funcionará en todos los navegadores?
No. Necesita un motor de 2023 o posterior, y uno más antiguo descarta la declaración entera en lugar de recurrir a sRGB: aquí no hay soporte parcial. Pon un degradado sRGB simple en una declaración anterior y deja que el motor más nuevo la sobrescriba, que es el respaldo estándar de la cascada CSS y cuesta una línea más.
¿Por qué la tira sRGB se pone gris en el medio?
Porque interpolar en sRGB traza una línea recta a través del cubo de color, y la línea entre dos tonos más o menos opuestos pasa cerca del eje neutro. Nada está mal en el degradado: hace exactamente lo que dicen los números, y los números nunca trataron de cómo se ve el color.
Mi degradado tiene bandas visibles. ¿Esto puede arreglarlo?
No directamente. Las bandas son la salida de 8 bits cuantizando una rampa lenta sobre un área grande, y ninguna elección de espacio de interpolación las elimina. Las respuestas habituales son una capa de ruido tenue, una textura sutil repetida, o hacer que el degradado recorra una distancia más corta. Esta herramienta emite solo CSS y no hace ningún tramado.
¿Puedo exportarlo como imagen?
No. La salida es un valor CSS, que es más pequeño que cualquier imagen de él, independiente de la resolución y animable. Si necesitas un archivo de mapa de bits —para una plantilla de correo, digamos, donde los degradados CSS no son fiables—, haz una captura de pantalla de la vista previa o constrúyelo en el generador de patrones, que dibuja en un canvas.
Puede recibir de
Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Generador de patrones de fondo
Background Pattern Generator
Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Generador de patrones de fondo
Background Pattern Generator
Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.