CSS Gradient Generator

Build linear and radial gradients visually. Copy the CSS with one click.

135°

CSS Output

background: linear-gradient(135deg, #2563eb, #7c3aed);

Browser prefixes (if needed)

background: -webkit-linear-gradient(135deg, #2563eb, #7c3aed);
background: -moz-linear-gradient(135deg, #2563eb, #7c3aed);
background: linear-gradient(135deg, #2563eb, #7c3aed);

Presets

About CSS Gradient Generator

CSS gradients create smooth colour transitions directly in the browser without needing image files. This generator lets you visually build linear and radial gradients, add multiple colour stops, adjust the angle or position, and copy the ready-to-use CSS with one click.

Linear vs radial gradients

A linear gradient transitions colours along a straight line at a configurable angle (0°–360°). Common uses include button backgrounds, hero section overlays, and progress bars. A radial gradient radiates outward from a central point in a circular or elliptical pattern. It is often used for glowing effects, spot highlights, and spotlight backgrounds.

How to use

Choose between Linear and Radial mode. Add up to six colour stops by clicking Add stop, then drag the position sliders or edit colours. For linear gradients, adjust the angle with the degree slider. The live preview updates as you build, and the Copy CSS button copies the complete background declaration ready to paste into your stylesheet. Try the preset buttons at the bottom to get started quickly.

About the CSS Gradient Generator

A CSS gradient renders a smooth transition between two or more colours, either linearly along an axis or radially outward from a focal point. Gradients are one of the cheapest ways to add visual interest to a UI without adding image weight, and they remain crisp at every zoom level because the browser renders them mathematically rather than from pixel data.

This tool builds linear and radial gradients visually, lets you adjust direction, colour stops, and stop positions, and outputs the ready-to-paste CSS. The CSS uses the standard background-image syntax and is compatible with every modern browser without prefixes.

Linear versus radial

A linear gradient transitions colours along a straight line — useful for backgrounds, headers, and any directional emphasis. A radial gradient transitions from a centre point outwards in concentric shapes — useful for spotlights, decorative orbs, and subtle vignettes. Conic gradients (the third standard) sweep colour around a centre point and are excellent for pie charts and clock faces.

Colour stops and positioning

Each colour in a gradient has an associated position (0% to 100% along the gradient axis). With two stops at 0% and 100%, the transition is even. Adding a third stop in the middle or skewing the position lets you control where the colours bleed into each other, producing harder edges or longer fades. Multiple colours can sit side by side as solid bands by giving them adjacent stop positions, which is useful for striped backgrounds.

How to use the CSS Gradient Generator

  1. Pick gradient type

    Choose linear or radial.

  2. Set colours and stops

    Add at least two colour stops. Drag to reposition or change the colour using the colour picker.

  3. Adjust direction (linear) or shape (radial)

    Linear gradients have an angle in degrees. Radial gradients can be circular or elliptical, with a specifiable centre.

  4. Copy the generated CSS

    Paste it into a background-image property. The browser does the rendering.

Worked examples

Example 1

Input: Linear, blue to purple, 135deg

Result: background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);

A common modern UI hero gradient.

Example 2

Input: Radial, circle at centre, white to transparent

Result: background-image: radial-gradient(circle at center, white, transparent 70%);

A spotlight or vignette effect.

Real-world use cases

  • Designing hero section backgrounds without using image assets.
  • Creating coloured button hover states with subtle direction.
  • Building decorative dividers and section backgrounds.
  • Simulating soft lighting effects in flat UI designs.
  • Producing CSS for newsletter or email header banners (with care for email client compatibility).

Tips & common mistakes

  • Use HSL colours when adjusting gradients — going from one HSL hue to another produces smoother transitions than naive RGB interpolation.
  • For backgrounds, keep the contrast subtle if text will sit on top. A vivid gradient and white body text is rarely readable.
  • Conic gradients are widely supported as of 2022 and worth exploring for non-linear designs.
  • Test gradients on both light and dark themes if your site has theme switching — a gradient that looks great on light can be muddy or harsh on dark.

Frequently asked questions

Do CSS gradients work in older browsers?

Linear and radial gradients work in every browser released after 2013 without prefixes. Conic gradients require browsers from around 2022 onwards.

Are gradients accessible?

Gradients themselves are neutral, but text legibility over a gradient depends entirely on contrast. Always check WCAG contrast against the worst spot of the gradient, not the best.

Can I animate a gradient?

Not directly via the background-image property in most browsers. You can simulate motion by animating background-position with a large gradient, or use the modern @property and registered CSS variables for smooth interpolation.

Will gradient backgrounds slow down my page?

No measurable amount. They are GPU-cheap and add zero bytes to your HTTP transfer.

Related tools

→ Color Picker→ HTML Entities

Last updated: June 2026 · All processing happens locally in your browser.