Generador de degradados CSS
Diseña un degradado lineal, radial o cónico, mira cómo se actualiza en vivo y copia la regla CSS background.
Funciona completamente en tu navegador
Paradas de color
Ajustes predefinidos
Los colores de las paradas pueden ser cualquier color que entienda tu navegador (HEX, nombres, rgb(), hsl(), oklch()). Hasta 10 paradas. Las posiciones son porcentajes; el resultado es CSS simple sin prefijos de proveedor.
Cómo hacer un degradado CSS
- Elige Lineal, Radial o Cónico, o parte de un ajuste predefinido.
- Ajusta el ángulo o la posición y luego edita las paradas de color: cambia cada color y posición, agrega paradas y muévelas hacia arriba o hacia abajo.
- Presiona Copiar CSS y pega la regla en tu hoja de estilos. Marca la opción de respaldo si quieres una línea con un color sólido antes.
Cómo leer un degradado CSS
Un degradado CSS es una imagen que dibuja el propio navegador, así que se adapta a cualquier tamaño y no hay que descargar nada. Un degradado lineal mezcla colores a lo largo de una línea definida por un ángulo. Un degradado radial mezcla hacia afuera desde un punto central, en un círculo o una elipse. Un degradado cónico hace girar los colores alrededor de un centro como la manecilla de un reloj, lo que lo hace ideal para gráficos circulares y círculos cromáticos.
Cada parada de color es un color más una posición a lo largo de la línea del degradado, escrita como porcentaje. Entre dos paradas, el navegador mezcla de forma suave. Si dos paradas comparten posición, la transición no tiene ancho y obtienes un borde nítido. Si una parada se coloca antes que la anterior, los navegadores la tratan como si estuviera en la posición de la parada anterior; por eso esta herramienta te permite reordenar y ordenar las paradas.
La regla se escribe como background: para que funcione en cualquier elemento. Los degradados se dibujan en el fondo, así que el texto encima necesita el mismo cuidado de contraste que sobre un color plano: revisa por separado las partes más clara y más oscura de la mezcla.
Consejos
- Elige colores de parada que combinen con el Generador de paletas de colores.
- Convierte una parada entre HEX, RGB y HSL con el Convertidor de colores y contraste.
- ¿Vas a publicar la hoja de estilos? Redúcela con Minificar y embellecer CSS.
Preguntas frecuentes
¿Qué significa el ángulo en un degradado lineal?
0deg apunta hacia arriba, así que el degradado va del borde inferior hacia arriba. 90deg va de izquierda a derecha, 180deg de arriba hacia abajo y 270deg de derecha a izquierda. 360deg es la misma dirección que 0deg. La herramienta escribe el número que ingresas con la unidad deg.
¿Cómo consigo un borde nítido en lugar de una transición suave?
Pon la misma posición en dos paradas vecinas. Por ejemplo, rojo en 50% seguido de azul en 50% cambia de color a la mitad sin transición. El ajuste predefinido Rayas marcadas lo muestra.
¿Qué hace la opción de repetición?
Escribe repeating-linear-gradient, repeating-radial-gradient o repeating-conic-gradient. El patrón entre tu primera y tu última parada se repite en mosaico, así que solo se nota cuando la última parada está antes del 100%. Prueba paradas en 0%, 10% y 20% para obtener rayas.
¿Para qué sirve la línea de color sólido de respaldo?
Un navegador que no puede leer el degradado ignora esa línea y se queda con la anterior. Los navegadores que admiten degradados, que son casi todos los que se usan, la sobrescriben. El color de respaldo es el de tu primera parada.
¿Qué formatos de color se aceptan?
Cualquiera que acepte la propiedad CSS color en tu navegador: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) u oklch(0.5 0.2 260). Si escribes otra cosa, aparece un mensaje y en pantalla se queda el último degradado válido.
¿Un degradado cónico necesita una posición?
Siempre tiene un centro, y esta herramienta lo escribe en porcentajes, así que 50% 50% es el centro de la caja. El ángulo inicial gira el punto donde empieza el barrido de color, medido en el sentido de las agujas del reloj desde arriba.