Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con una vista previa en vivo y código listo para copiar.
Respuesta rápida: Generador de Gradientes CSS: crea gradientes CSS lineales o radiales con vista previa en directo y código listo para copiar. Funciona totalmente en tu navegador, gratis y sin registro.
Última actualización
Bueno saber
The mechanics that trip people up are direction and stop placement. In CSS a linear gradient angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg down. Radial gradients instead radiate from a center point outward, which makes them ideal for spotlights, soft vignettes and button glows where linear direction would look wrong.
Watch for the gray dead zone. Interpolating between two saturated but complementary hues — say blue to orange — routes the midpoint through a muddy gray in the default sRGB space. Nudging the stops or picking colors closer on the wheel keeps the blend lively; browsers that support in oklch interpolation produce noticeably cleaner transitions for far-apart hues.
For a smooth backdrop, keep contrast low and the angle shallow so banding stays invisible on wide screens; for a punchy accent, push the stops apart and raise the angle. Gradients are also purely decorative to assistive tech, so never rely on one to convey meaning — any text on top still has to clear the WCAG contrast threshold against the darkest part of the blend.
Pair this with a palette workflow: derive harmonious endpoints in the Color Palette Generator, then drop them in here to turn a two-color scheme into a background.
Preguntas frecuentes
- ¿Es gratis el generador de degradados?
- Sí, gratis sin necesidad de registrarse.
- ¿Lineal o radial?
- Ambos — alterna entre degradados lineales y radiales con el selector de tipo.
- ¿Puedo añadir más de dos paradas de color?
- La versión actual soporta dos paradas; el CSS resultante es fácil de extender a mano si necesitas más.
- ¿Funciona la salida en todas partes?
- Sí, la sintaxis es CSS puro compatible con todos los navegadores lanzados desde 2014.
- ¿Se suben mis colores?
- No, la vista previa y la generación de CSS se realizan completamente en tu navegador.