Design linear, radial, and conic gradients with live preview and copy-ready CSS.
background: -webkit- linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Generated CSS follows W3C CSS Images Module Level 3 specifications. Browser compatibility may vary. WebKit prefix is included for Safari support. Test across browsers.
A CSS gradient is not an image — it is a function the browser evaluates for every pixel it paints. A linear-gradient first draws an invisible gradient line through the element at your chosen angle, places your color stops (a color + a 0–100% position) along it, then interpolates each pixel's color between the two nearest stops. radial-gradient runs that same interpolation outward from a center point (circle or ellipse), while conic-gradient sweeps it around the center in a full rotation. Two stops are the minimum; more stops let you build banded or multi-color effects, and the browser keeps each adjacent pair of stops fully opaque and smoothly blended.
Left: a 135° linear gradient whose line runs from the top-left stop (#667eea at 0%) to the bottom-right stop (#764ba2 at 100%); each intermediate pixel is a weighted mix of the two. Right: the same stop concept wrapped radially (circle/ellipse) and conically (around the center).
Leo, a front-end dev, is handed a design mock with a diagonal purple-to-blue hero background but only a screenshot — no code. He opens this generator to recreate the exact feel and ship it as copy-ready CSS.
Build CSS gradients visually with live preview. Everything runs locally; nothing is uploaded.
FreeToolHub CSS Gradient Generator is a free browser-based tool — build CSS gradients visually with live preview. No signup, no upload; everything runs locally in your browser.
Crea degradados CSS visualmente con vista previa en vivo. Tipos lineal, radial y cónico. Arrastra los topes de color y ajusta ángulos. Código estándar + WebKit.
Este generador construye gradientes CSS visualmente: elige el tipo linear, radial o conic, arrastra los puntos de color a lo largo de la barra, ajusta el ángulo y la posición, y mira cómo la vista previa se actualiza en vivo. La herramienta emite código listo para producción que incluye la propiedad estándar y el fallback con -webkit- para Safari antiguo, con sintaxis para variantes repeating cuando el objetivo son patrones. Los gradientes multipunto con puntos medios, los puntos de color transparentes y las direcciones lineales con ángulo preciso se configuran todos por manipulación directa: el camino más rápido del fondo imaginado al CSS desplegado.
Los desarrolladores frontend prototipan fondos de hero, botones y divisores sin escribir a mano la sintaxis de gradientes ni reajustar números a ciegas. Los diseñadores entregan a los desarrolladores especificaciones exactas —puntos, ángulos, valores hex— en lugar de un lenguaje aproximado como «hazlo más cálido». Los constructors de landing pages siguen las paletas de marca hacia sistemas de gradientes para tarjetas y llamadas. Y cualquiera que mantenga codebases antiguos agradece la salida generada con el prefijo -webkit- donde aún hace falta. La vista previa en vivo elimina por completo el ciclo de editar-guardar-refrescar.
(1) Elige el tipo de gradiente: linear para mezclas direccionales, radial para luz que emana de un punto, conic para efectos de barrido y visuales tipo tarta. (2) Añade puntos de color haciendo clic en la barra; arrastra para posicionar, haz clic para editar color y alpha, y arrastra los tiradores de punto medio para sesgar la mezcla. (3) Para gradientes lineales fija el ángulo en grados; para radiales y cónicos fija la posición del centro. (4) Copia el CSS generado —estándar y con prefijo WebKit— directamente a tu hoja de estilos; un conmutador de repetición convierte cualquier configuración en su contraparte repetida.
Los tres tipos responden a tres preguntas visuales. Los gradientes lineales mezclan a lo largo de una línea y hacen el trabajo más habitual: fondos de hero y de sección, botones, subrayados de texto, rellenos de progreso y divisores; una mezcla sutil de dos tonos de oscuro a más oscuro a 135 o 180 grados se lee como luz cayendo sobre una superficie. Los gradientes radiales mezclan hacia fuera desde un punto y simulan fuentes de luz: efectos de foco, viñetas, brillo suave detrás de iconos y el clásico brillo sutil de fondo de página que ancla la atención en el centro. Los gradientes cónicos barren alrededor de un círculo y construyen estructura rotacional: gráficos de tarta, ruedas de color, spinners de carga, anillos de progreso estilo radar y efectos de insignias angulares, es decir, todo lo donde la posición significa dirección y no distancia. Dos reglas de oficio llevan la mayor parte de la calidad: mantén los puntos cerca en luminosidad para fondos (un hueco de 5 a 10 puntos de luminosidad basta) porque los saltos grandes producen bandas visibles, y prefiere los gradientes antes que las capas semitransparentes para oscurecer heroes fotográficos: una capa aplana la imagen, un gradiente oscuro conserva la profundidad.
Un gradiente es tan bueno como su lista de puntos, y tres hábitos separan las mezclas pulidas de las turbias. Primero, ordena los puntos por luminosidad además de por posición: una secuencia de oscuro a claro se siente direccional e intencionada, mientras que alternar la luminosidad se lee como bandeado. Segundo, dos puntos suelen bastar: cada punto extra reduce a la mitad tu control sobre la mezcla, así que añade puntos medios solo para corregir una zona plana o dura concreta. Tercero, mantén el recorrido de tono por debajo de unos 90 grados entre vecinos salvo que quieras deliberadamente un barrido arcoíris: de púrpura a azul se mantiene rico, mientras que de púrpura a amarillo pasa por un gris que nadie pidió. Carga un preajuste, cambia sus dos valores hex por los colores de tu marca y ajusta las posiciones antes de añadir nada. Guarda el resultado en tu navegador y copia el CSS: la salida es CSS plano sin dependencias.
Los gradientes lineales y radiales funcionan en todos los navegadores lanzados esta década. Los gradientes cónicos están soportados en todos los navegadores evergreen (Chrome, Edge, Firefox, Safari) desde 2020-2021, así que son seguros en uso general, con un color de respaldo sólido recomendado para clientes de email y webviews antiguos.
Los gradientes lineales mezclan a lo largo de un eje: indicados para banners, botones y capas superpuestas. Los gradientes cónicos mezclan alrededor de un círculo: indicados para gráficos de tarta, anillos de carga y barridos de color angulares. Si el diseño se lee como «de aquí a allá», usa lineal; si se lee como «alrededor del reloj», usa cónico.
Los gradientes se pintan una vez y se cachean como cualquier imagen de fondo, así que los gradientes estáticos son esencialmente gratuitos. Animar las posiciones del gradiente fuerza repintados: si necesitas movimiento, anima un transform sobre una capa de gradiente sobredimensionada en lugar del propio gradiente, para mantenerte en la GPU.
Mezcla tonos que estén de acuerdo con sus vecinos: los puntos adyacentes funcionan mejor dentro de unos 90 grados de tono, o con luminosidad similar en tonos vecinos. Coloca los puntos en el punto medio visual y no en el aritmético para mantener la mezcla equilibrada: las paletas de preajuste son puntos de partida preequilibrados.
It supports linear-gradient (with angle control from 0° to 360°), radial-gradient (circle/ellipse with position control), and conic-gradient (with starting angle). Add unlimited color stops with precise percentage positioning. The live preview updates as you drag, and output is production-ready CSS with vendor prefixes if needed.
Yes. Copy the CSS property value, a full class definition, or a Tailwind CSS arbitrary value. It also generates the equivalent SVG markup for use in design tools. Popular presets (aurora, sunset, mesh-style multi-gradient) are included as starting points, each with 3-5 color stops pre-configured.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.