Building a hero or call-to-action section background without burning into an image. Creating button or card hover states that look "modern" without an image asset. Mocking a brand-coloured overlay (gradient + low-opacity solid for text legibility). Generating decorative dividers, mesh-style backgrounds, or animated SVG fills.

Linear — colors transition along a straight line at a chosen angle (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom). Radial — colors spread from a center point outward as a circle or ellipse. Great for spotlight or vignette effects.

Use as background , not background-color . Gradients are images, not colors. background-color is ignored. Stops must be in order for predictable rendering. The tool sorts them automatically — if you copy CSS and edit by hand, keep the percentages monotonic. Hard stops (two stops at the same percentage) make a sharp boundary instead of a fade — useful for striped or band effects. Banding on big areas. Long, low-contrast gradients can show visible "bands" on 8-bit screens. Add a tiny SVG noise overlay ( filter: url(#noise) ) or move the stops slightly. Performance. Browsers paint gradients quickly, but animating background-image triggers paint on every frame — animate transform on a layer above instead. Accessibility. If text sits on a gradient, check the contrast ratio against the worst point along the gradient where the text appears, not the average.

Generador de Gradiente CSS

Crea gradientes CSS lineales y radiales visualmente. Edita paradas de color, copia CSS listo para producción.

Tipo

Angle 90°

Color stops

Preview

CSS

What is this for?

CSS gradients are a single line of CSS that draws smooth color transitions for backgrounds, buttons, hero panels, and overlays — without any image asset. The syntax is powerful but fiddly to write by hand: angles, percentage stops, repeating variants, mixing linear with radial. This tool gives you a visual builder that mirrors the CSS in real time, so you can drag a stop into place and copy the exact linear-gradient(...) or radial-gradient(...) string.

When to use it

Building a hero or call-to-action section background without burning into an image.
Creating button or card hover states that look "modern" without an image asset.
Mocking a brand-coloured overlay (gradient + low-opacity solid for text legibility).
Generating decorative dividers, mesh-style backgrounds, or animated SVG fills.

Linear vs radial

Linear — colors transition along a straight line at a chosen angle (0° = bottom-to-top, 90° = left-to-right, 180° = top-to-bottom).
Radial — colors spread from a center point outward as a circle or ellipse. Great for spotlight or vignette effects.

Common gotchas

Use as background, not background-color. Gradients are images, not colors. background-color is ignored.
Stops must be in order for predictable rendering. The tool sorts them automatically — if you copy CSS and edit by hand, keep the percentages monotonic.
Hard stops (two stops at the same percentage) make a sharp boundary instead of a fade — useful for striped or band effects.
Banding on big areas. Long, low-contrast gradients can show visible "bands" on 8-bit screens. Add a tiny SVG noise overlay (filter: url(#noise)) or move the stops slightly.
Performance. Browsers paint gradients quickly, but animating background-image triggers paint on every frame — animate transform on a layer above instead.
Accessibility. If text sits on a gradient, check the contrast ratio against the worst point along the gradient where the text appears, not the average.