Generador de degradados CSS
Colores
Predefinidos
Cómo crear un degradado CSS
- Elige un tipo: el lineal va en línea recta con el ángulo que marques, el radial se abre en círculo desde el centro y el cónico gira alrededor del centro desde el ángulo que marques.
- Cambia cada color y arrastra su control para situarlo entre 0% y 100%. Añadir un color pone uno nuevo en el hueco más ancho, hasta seis; ✕ quita uno.
- O pulsa un ajuste predefinido para partir de él. La vista previa cambia al momento; Copiar CSS copia las líneas para pegarlas en tu hoja de estilos.
Preguntas frecuentes
¿Por qué hay dos líneas de background?
La primera es un color liso para el raro navegador que no dibuja degradados; la segunda la sustituye en todos los demás.
¿Qué significa el ángulo?
En un degradado lineal, 0deg va de abajo arriba, 90deg de izquierda a derecha y 180deg de arriba abajo. En uno cónico es dónde empieza el primer color, girando en el sentido del reloj desde arriba.
¿Puedo usar el degradado en un texto o un borde?
Sí. Para el texto, ponlo como fondo y añade background-clip: text y color: transparent. Para un borde, úsalo en border-image con border-image-slice: 1.