Generador de degradados CSS
Crea un degradado CSS de hasta cuatro paradas de color, lineal, radial o cónico, y copia el código como CSS o como clases de Tailwind v4.
Cómo crear un degradado CSS
- Elige lineal, radial o cónico con los botones de Tipo.
- Haz clic en una parada de color para cambiar su color. Usa Agregar parada y Quitar parada para trabajar con dos a cuatro paradas.
- Para un degradado lineal, ajusta la rotación de 0 a 315 grados en pasos de 45. Presiona Aleatorio para obtener una idea nueva.
- Cambia la exportación entre CSS y Tailwind v4 y presiona el botón de copiar para llevarte el código.
Qué puedes hacer
Tres tipos de degradado
Degradados lineales a lo largo de un ángulo, radiales desde un punto central y cónicos que giran alrededor de un punto.
CSS interpolado en OKLCH
El CSS incluye una versión en sRGB que cualquier navegador entiende, seguida del mismo degradado interpolado en OKLCH, que mantiene el centro tan vivo como los extremos en los navegadores que lo admiten.
Exportación a Tailwind v4
Copia el degradado como clases de utilidad de Tailwind v4 en lugar de CSS.
Vista previa en vivo
La vista previa se actualiza mientras cambias los colores, el ángulo y el tipo.
Parte de la biblioteca
Abre cualquier degradado de la biblioteca de degradados en el creador, con sus paradas y su ángulo ya cargados.
Preguntas frecuentes
¿Cómo creo un degradado CSS?
Elige un tipo, define de dos a cuatro colores y, para un degradado lineal, un ángulo. El generador escribe la declaración background y tú la copias en tu hoja de estilos.
¿Cuál es la diferencia entre los degradados lineales, radiales y cónicos?
Un degradado lineal mezcla los colores a lo largo de una línea recta con un ángulo. Uno radial los mezcla hacia afuera desde un punto central. Uno cónico hace girar los colores alrededor de un punto central, como una rueda de color o un gráfico circular.
¿Por qué mi degradado se ve gris o turbio en el centro?
Mezclar dos colores saturados en sRGB puede pasar por un punto medio más apagado. Interpolar en OKLCH, que el CSS de este generador incluye para los navegadores que lo admiten, suele mantener el centro más vivo.
¿Puedo usar estos degradados en Tailwind CSS?
Sí. Cambia la exportación a Tailwind v4 y copia las clases.
¿Cuántas paradas de color puedo agregar?
De dos a cuatro. Para una rampa más larga de colores separados, usa el generador de paletas degradadas.