Generador de Gradientes CSS

Generador de Gradientes CSS

Los gradientes CSS te permiten crear transiciones de color suaves sin necesidad de archivos de imagen. El navegador los renderiza como fondo usando las funciones linear-gradient(), radial-gradient() y conic-gradient(). Esta herramienta genera el CSS visualmente para que puedas ver el resultado mientras ajustas colores, angulos y posiciones de los puntos.

Como Usarlo

1. Elige un tipo de gradiente. Linear para mezclas direccionales, radial para fundidos circulares, conic para barridos angulares
2. Agrega y ajusta puntos de color. Haz clic en el selector para elegir un color, arrastra el control deslizante para definir su posición en el gradiente
3. Ajusta la dirección. Usa el cuadrante de angulo o los botones de flecha para gradientes linear. Para radial y conic, ajusta la posición del centro con los controles deslizantes X/Y
4. Prueba un preset para inspirarte. Haz clic en cualquier miniatura de preset para cargar sus colores y configuraciones como punto de partida
5. Copia el CSS. Haz clic en el boton Copiar o presiona Cmd+C para copiar la propiedad background a tu portapapeles

Como Funcionan los Gradientes CSS

Un gradiente CSS es tecnicamente una imagen, no un color. La propiedad abreviada background lo acepta porque background-image es parte de la abreviatura. Esto significa que puedes superponer multiples gradientes separados por comas en el mismo elemento, y usar gradientes en cualquier lugar que acepte imagenes: border-image, list-style-image, incluso mask-image.

El navegador calcula el gradiente creando una ‘línea de gradiente’ (linear), un ‘rayo de gradiente’ (radial) o un ‘arco de gradiente’ (conic). Los puntos de color definen los colores en posiciones específicas a lo largo de esta línea. Entre puntos, el navegador interpola en el espacio de color sRGB por defecto. CSS Color Level 4 introduce interpolación in oklab e in oklch para mezclas más uniformes perceptualmente, pero el soporte del navegador aún no es universal.

Los puntos de posición usan porcentajes o longitudes. red 20%, blue 80% significa rojo puro al 20%, azul puro al 80% y un degradado entre ellos. Si omites las posiciones, el navegador las distribuye uniformemente: con dos colores, el primero al 0% y el segundo al 100%. Con tres colores, al 0%, 50% y 100%.