Generador de degradados CSS
Elige el tipo de degradado, la dirección y los colores. Ajusta cada punto de color con el selector y el control deslizante, y añade más con «+ Punto de color». El generador escribe el degradado en CSS breve y válido, y agrega un color de respaldo opaco para background-color, así el texto se lee aunque no se muestre el degradado.
Cómo se calcula
Tres tipos de degradado
| Función | Degradado | Predeterminado (se omite) |
|---|---|---|
linear-gradient() | a lo largo de una recta con el ángulo elegido | 180deg = de arriba abajo |
radial-gradient() | del centro hacia fuera | elipse, centrada, hasta la esquina más lejana |
conic-gradient() | alrededor del centro, como un gráfico circular | desde 0deg (arriba), en sentido horario |
En un degradado lineal, el ángulo marca la dirección: 0deg hacia arriba, 90deg hacia la derecha, 180deg hacia abajo. «Repetir» genera repeating-linear-gradient() y sus variantes: el patrón entre el primer y el último punto se repite, ideal para rayas.
Puntos de color y posiciones que faltan
Las posiciones son opcionales. Si faltan, se aplica la especificación del W3C (CSS Images, «Coloring the Gradient Line»): el primer punto queda en 0 %, el último en 100 % y los que no tienen posición se reparten de forma uniforme. Si una posición es menor que una anterior, se sube hasta ella; así se consiguen bordes nítidos. Dos posiciones seguidas (red 0% 50%) crean una franja de un solo color. La tabla muestra la posición que usa realmente el navegador.
¿Para qué un color de respaldo?
Los degradados son imágenes. Si la imagen no se dibuja (por ejemplo, en modo de colores forzados o por un error en el valor), solo queda background-color. El generador usa para ello el promedio de los colores ponderado por superficie.
Ejemplo linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): cada color cubre la mitad. Rojo (59 + 147) ÷ 2 = 103, verde (130 + 51) ÷ 2 = 90,5 ≈ 91, azul (246 + 234) ÷ 2 = 240: color de respaldo #675BF0. Revisa el contraste del texto con este color y con las zonas más claras y más oscuras del degradado.
Preguntas frecuentes
¿Cómo hago un degradado en CSS?
Con background-image: linear-gradient(90deg, #3B82F6, #9333EA); o con la forma abreviada background. Antes pon un background-color de respaldo. El generador te da ambas líneas listas para copiar.
¿Cómo consigo bordes nítidos en lugar de transiciones suaves?
Da la misma posición a dos puntos, p. ej. red 50%, blue 50%, o dos posiciones a un color: red 0% 50%, blue 50% 100%. Con «Repetir» obtienes rayas.
¿conic-gradient funciona en todos los navegadores?
En todos los navegadores actuales, sí (Chrome y Edge desde la versión 69, Firefox desde la 83, Safari desde la 12.1). En navegadores muy antiguos, el color de respaldo evita que la zona quede vacía.
¿Puedo usar colores transparentes?
Sí. Escribe un punto en rgba() o en HEX de 8 dígitos, p. ej. rgba(0, 0, 0, 0.5). La vista previa muestra la transparencia sobre un tablero de ajedrez. El color de respaldo siempre es opaco.
Fuentes y base legal
- css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
- css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
- css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
- css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
- MDN Web Docs – linear-gradient()
- MDN Web Docs – radial-gradient()
- MDN Web Docs – conic-gradient()
Última actualización:
Herramientas relacionadas
- Generador de box-shadow CSSCrea sombras CSS con controles: varias sombras, desplazamiento, desenfoque, expansión, color con transparencia, inset y plantillas. Vista previa y CSS listo.
- Generador de border-radius CSSRedondea esquinas con controles: todas a la vez o una por una, en px o %, elípticas con 8 valores; forma abreviada más corta, vista previa y CSS listo.
- Generador de paletas de coloresCrea colores que combinan a partir de un color base: complementarios, análogos, triádicos, cuadrado, complementario dividido o monocromo, con HEX, RGB y HSL.
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Cuál es mi resolución de pantallaDescubre al instante tu resolución de pantalla, píxeles físicos, viewport, devicePixelRatio, relación de aspecto y breakpoint CSS. En vivo, en tu navegador.