Generador de degradados CSS

Cómo usar el generador de degradados CSS

1. Elige un Tipo de degradado: Lineal, Radial o Cónico. La vista previa grande de arriba se actualiza con cada cambio.
2. En un degradado lineal, ajusta el Ángulo con el deslizador o escríbelo en grados (90° va de izquierda a derecha y 180°, de arriba abajo). En un degradado cónico, el ángulo indica dónde empieza el barrido.
3. En los degradados radiales y cónicos, mueve el centro con Centro X y Centro Y. Un degradado radial puede ser un Círculo o una Elipse (menú Forma).
4. Edita las Paradas de color. Haz clic en cualquier punto de la barra para añadir una parada con el color que ya tiene el degradado en ese punto, o usa Añadir parada para rellenar el hueco más amplio. Arrastra un tirador para moverlo. Cada parada tiene además una fila en la que puedes elegir su color, escribir cualquier color CSS, fijar su Posición (%) o quitarla con Eliminar (un degradado conserva siempre al menos dos paradas).
5. Si quieres, marca Repetido, elige la Interpolación del color, pulsa Invertir para dar la vuelta a las paradas o Degradado aleatorio para inspirarte.
6. Copia el resultado del Código CSS con Copiar.

Teclado: selecciona un tirador de la barra y usa las flechas para moverlo un 1 % (10 % con Mayús), Inicio y Fin para saltar a los extremos, y Supr para eliminarlo.

Las tres funciones de degradado

• linear-gradient() mezcla los colores a lo largo de una línea recta. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) va del índigo a la izquierda al rosa a la derecha. Los ángulos se miden en el sentido de las agujas del reloj desde arriba: 0deg apunta hacia arriba y 90deg, a la derecha.
• radial-gradient() se irradia desde un punto central. radial-gradient(circle at 30% 40%, …) sitúa el centro a un 30 % desde la izquierda y un 40 % desde arriba. Una elipse se estira con la caja; un círculo se mantiene redondo.
• conic-gradient() gira alrededor de un centro como las agujas de un reloj. conic-gradient(from 0deg at 50% 50%, …) sirve para ruedas de color, gráficos circulares y efectos de carga. Las posiciones de las paradas son fracciones de la vuelta completa.

La opción Repetido usa repeating-linear-gradient() y sus variantes: el patrón definido por tus paradas se repite hasta llenar la caja. Pon la última parada muy por debajo del 100 % (por ejemplo, al 20 %) para ver franjas o anillos.

Dos paradas en la misma posición crean un corte nítido en lugar de una transición; así se hacen las rayas y las banderas. El generador mantiene las paradas ordenadas por posición en el código, como exige CSS.

Interpolación sRGB u OKLCH

Por defecto, los navegadores mezclan los colores del degradado en sRGB. Entre dos colores saturados, como el azul y el amarillo, esto suele producir un centro gris o apagado. CSS Color Level 4 permite elegir el espacio de interpolación: linear-gradient(90deg in oklch, …) mezcla en el espacio perceptual OKLCH y mantiene vivo el centro.

Con OKLCH (más suave, con alternativa sRGB), la herramienta escribe dos declaraciones background: primero la versión sRGB clásica y después la OKLCH. Los navegadores que admiten espacios de interpolación (Chrome y Edge 111+, Safari 16.2+, Firefox 127+) usan la segunda línea; los más antiguos la ignoran y se quedan con la primera.

Consejos

• Los campos de las paradas aceptan colores con transparencia, por ejemplo #00000080 o rgb(0 0 0 / 50%), algo muy útil para superposiciones sobre imágenes.
• El código se escribe con background. Usa background-image si defines por separado otras propiedades del fondo.
• Los degradados sutiles (dos matices cercanos de un mismo color) suelen verse más profesionales que las mezclas tipo arcoíris.