Generador de Gradientes CSS
Un gradiente puede dar a botones, tarjetas, secciones hero e insignias un acabado cuidado sin necesidad de ninguna imagen. Este generador escribe el CSS por ti: elige un gradiente lineal o radial, selecciona dos colores, ajusta el ángulo cuando lo necesites y copia la declaración background resultante directamente en tu hoja de estilos.
Cómo construir un gradiente
-
1
Elige el tipo de gradiente
Lineal para una transición recta a lo largo de un ángulo, o radial para expandir los colores hacia fuera desde un punto central.
-
2
Elige dos colores
Introduce los colores en formato hexadecimal (por ejemplo #2563eb y #16a34a) en los dos campos de color.
-
3
Ajusta el ángulo (solo lineal)
El ángulo en grados: 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo. Los gradientes radiales ignoran el ángulo.
-
4
Genera el CSS
La herramienta construye la declaración `background:` con tus valores.
-
5
Copia el código
Copia la línea de declaración y pégala en tu hoja de estilos, dentro de la regla del elemento que quieres estilizar.
Gradientes lineales
background: linear-gradient(135deg, #2563eb, #16a34a);
El ángulo avanza en el sentido de las agujas del reloj desde arriba: 0deg = arriba, 90deg = derecha, 180deg = abajo, 270deg = izquierda. También puedes escribir direcciones con nombre a mano: to right equivale a 90deg y to bottom left a 135deg.
Gradientes radiales
background: radial-gradient(circle, #2563eb, #16a34a);
Los colores se expanden hacia fuera desde el centro del elemento. Los gradientes radiales no usan ángulo; añade palabras clave de posición o tamaño a mano (at 30% 40%, ellipse) cuando necesites más control.
Paradas de color
Los gradientes CSS admiten más de dos colores, y cada parada puede tener una posición:
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
Dos paradas con la misma posición crean una parada dura: el color cambia de golpe en lugar de mezclarse. Útil para fondos divididos.
Consejos
- Un gradiente de rojo a azul pasa por un punto medio grisáceo en la interpolación sRGB por defecto. Interpolar en
oklchmantiene la mezcla colorida:linear-gradient(in oklch, red, blue), compatible con los navegadores modernos. transparentno es incoloro: en sRGB esrgba(0,0,0,0), así que un fundido a transparente pasa por gris oscuro. Usargba(color, 0)en su lugar.- Los gradientes se renderizan en la GPU en los navegadores modernos, por lo que apenas cuestan en cualquier tamaño. Animar entre gradientes no está soportado y cambia de golpe; anima la opacidad de una capa extra en su lugar.
- Relleno de texto: combina la declaración con
background-clip: text; color: transparent;para rellenar texto con un gradiente. Para bordes,border-image: linear-gradient(...) 1;funciona en los navegadores modernos.
Preguntas frecuentes
Lineal para mezclas direccionales, como un botón o una hero que fluye de arriba abajo o de esquina a esquina. Radial para efectos de foco y brillo, donde los colores se expanden hacia fuera desde un punto central.
El ángulo fija la dirección de la transición en los gradientes lineales: 0deg apunta hacia arriba, 90deg hacia la derecha, y así en el sentido de las agujas del reloj. Los gradientes radiales ignoran el ángulo.
La interpolación sRGB por defecto promedia los componentes de color, lo que produce un punto medio desaturado. Interpola en oklch en su lugar (linear-gradient(in oklch, red, blue)) para mantener la mezcla colorida en el centro.
CSS no puede interpolar entre dos valores de background-image, el cambio es brusco. Soluciones habituales: animar la opacidad de un gradiente superpuesto o desplazar background-position sobre un gradiente fijo más grande.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.