Cómo usar: Generador de Gradientes CSS
- Elige un preajuste o parte del degradado predeterminado.
- Selecciona Lineal, Radial o Cónico y ajusta el ángulo, la forma o la posición.
- Edita las paradas de color: haz clic en la barra para añadir una, arrastra los controles para moverlas y escribe colores y posiciones exactas en la lista.
- Opcionalmente elige una interpolación OKLab/OKLCH para mezclas más suaves y, después, haz clic en Copiar CSS.
¿Qué es un degradado CSS?
Un degradado CSS es una imagen generada por el navegador que hace una transición entre dos o más colores. Como es una <image>, se usa en background, background-image, border-image o mask-image, no en background-color. Los degradados no necesitan una petición HTTP, se escalan a cualquier tamaño sin perder nitidez y se pueden animar o superponer.
Degradados lineales, radiales y cónicos
| Tipo | Ejemplo | Uso típico |
|---|---|---|
| Lineal | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Fondos de portada, botones, superposiciones sobre imágenes |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Focos de luz, resplandores, viñetas |
| Cónico | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Ruedas de color, gráficos circulares, cargadores |
En un degradado lineal 0deg apunta hacia arriba y 90deg hacia la derecha (igual que to right). Los ángulos cónicos empiezan arriba y avanzan en sentido horario.
Paradas de color y bordes duros
Cada parada es un color más una posición opcional. Cuando dos paradas comparten la misma posición, la transición se convierte en un borde duro; así se crean las rayas o el preajuste Gráfico circular: #4f46e5 0% 40%, #22c55e 40% 75%. Para que un contenido se desvanezca sobre la página, termina con una versión transparente del mismo color (por ejemplo #00000000), lo que evita una franja gris sucia.
Degradados más suaves con OKLab y OKLCH
Por defecto los navegadores interpolan en sRGB, así que azul → amarillo pasa por un gris apagado. CSS Color 4 permite elegir el espacio de color: linear-gradient(90deg in oklab, blue, yellow) se mantiene brillante y uniforme, y in oklch recorre la rueda de matices. El generador muestra primero una declaración sRGB sencilla y después la versión interpolada, así que los navegadores que no entienden la sintaxis simplemente ignoran la última línea.
Usar degradados en Webflow
El panel de estilos de Webflow tiene editores integrados de degradados lineales y radiales en Backgrounds; copia en ellos el ángulo y los colores de las paradas desde esta herramienta. Para lo que el panel no muestra, como los degradados cónicos o la interpolación in oklch, pega el CSS en un bloque <style> dentro de un elemento Embed o en el código personalizado de la página y apunta a tu clase. ¿Necesitas sombras a juego? Prueba el Generador de Box Shadow, o comprueba el texto sobre tu degradado con el Verificador de contraste.
También se busca como: generador de degradados css, linear-gradient, radial-gradient, conic-gradient, fondo degradado css, paradas de color, generador de gradientes, gradiente oklch.
Herramientas que combinan con: Generador de Gradientes CSS
- Generador de patrones SVG — Dale a secciones y tarjetas una textura sutil con patrones SVG sin costuras: puntos, cuadrículas, líneas diagonales, zigzags, ondas, cruces, tableros de ajedrez, círculos, triángulos y más.
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Conversor SVG a CSS — Pega un SVG y obtén un data URI compacto codificado en URL, además de CSS listo para usar con background-image y mask-image recoloreable.
- Generador de imágenes OG — Crea en cuestión de segundos una imagen de vista previa del enlace con un acabado impecable para Facebook, LinkedIn, X, Slack y WhatsApp: elige una plantilla, escribe el título, añade un logotipo y, a continuación, descárgate el archivo PNG y las metaetiquetas correspondientes.
Preguntas frecuentes
¿Cómo hago un degradado transparente?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Desvanecerse hasta el mismo color con alfa cero evita la franja gris que puede aparecer con la palabra clave transparent en navegadores antiguos.¿Por qué mi degradado se ve sucio o gris en el centro?
¿Puedo aplicar un degradado a un texto?
background-clip: text; -webkit-background-clip: text; color: transparent;. Mantén un color sólido de respaldo para la legibilidad y comprueba el contraste con la página.¿Por qué el CSS incluye primero un color de fondo sólido?
¿Cómo animo un degradado CSS?
background-position sobre un degradado más grande o registrar propiedades personalizadas con @property y animar los colores de las paradas o el ángulo.