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.
Fuente: css-images-3, § 3.1, W3C – CSS Images Module Level 3: Linear Gradients. Actualizado: .
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.
Cómo crear un degradado CSS
- Elige el tipo – lineal, radial o cónico – y la dirección, el ángulo inicial o la forma.
- Coloca los puntos de color con el selector y el control deslizante y añade más; «Repetir» crea patrones de rayas.
- Copia la declaración CSS con su color de respaldo o solo el degradado para background-image.
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.
Encuentra colores para el degradado con el generador de paletas de colores, convierte entre HEX y RGB con el convertidor de colores y añade sombras con el generador de box-shadow CSS.
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.
¿Cómo cambio la dirección de un degradado lineal?
Con el ángulo: 0deg va hacia arriba, 90deg hacia la derecha y 180deg (por defecto) hacia abajo. linear-gradient(90deg, …) equivale a linear-gradient(to right, …).
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: · Principios editoriales
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.
- Dígito verificador RUT: calcúlalo o valida un RUT chilenoDígito verificador RUT: escribe el número y obtén el dígito (0 a 9 o K) con el cálculo módulo 11 paso a paso, o pega un RUT completo con guion para validarlo.
- JSON escape / unescapeJSON escape y unescape online: convierte un texto en una cadena JSON válida con comillas, barras invertidas y saltos de línea escapados, o al revés.
- Validar CUIT y CUIL: comprobá el dígito o calculalo con el DNIValidar CUIT o CUIL online: pegá las 11 cifras y comprobá el dígito verificador, o escribí el DNI y el sexo y calculá el CUIL con el método módulo 11.
- Calcular letra DNI y NIE al instanteCalcular letra DNI online: escribe las 8 cifras y obtén la letra del NIF; también para NIE (X, Y, Z). Comprueba si la letra es correcta. Sin registro.