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
- Elige un tipo de gradiente. Linear para mezclas direccionales, radial para fundidos circulares, conic para barridos angulares
- 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
- 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
- Prueba un preset para inspirarte. Haz clic en cualquier miniatura de preset para cargar sus colores y configuraciones como punto de partida
- Copia el CSS. Haz clic en el boton Copiar o presiona Cmd+C para copiar la propiedad
backgrounda 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%.