Skip to content
Work data is processed in your browser, not stored on our servers.
tools
Linear & Radial CSS Gradient Generator

Linear & Radial CSS Gradient Generator

Visually edit linear or radial gradient direction, shape, color stops, and positions, then copy the background CSS.

Focus mode
Preview
Preview the gradient in real time.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Settings
Adjust the type and direction.
90°
Color stops
Add or remove colors and positions (%).
%
%

Key features

  • Builds 0–360 degree linear gradients or circular and elliptical radial gradients.
  • Adds HEX or alpha-HEX color stops at positions from 0% to 100%.
  • Maintains at least two stops and sorts them by position for CSS output.
  • Randomizes stop colors or resets the editor to its defaults.
  • Shows a live preview and the completed background declaration.

How to use

  1. Choose linear or radial and set the angle or radial shape.
  2. Edit each stop's HEX color and position, adding more stops if needed.
  3. Review the preview and copy the background CSS.

Examples

  • Build a linear page background

    Adjust the angle and color stops to create linear-gradient CSS for a page background or banner.

  • Explore radial color effects

    Switch between circular and elliptical radial gradients and randomize colors to compare directions quickly.

Privacy

Gradient settings, random colors, and CSS generation run in your browser.

Requirements

Typed colors must use three-, six-, or eight-digit HEX; confirm eight-digit alpha-HEX support in every target browser.

Common questions

Can I add and position color stops?
Yes. Keep at least two stops, add or remove others, and set each position from 0% to 100%.
What CSS output does it generate?
It creates a copyable background declaration containing either a linear-gradient or radial-gradient value, depending on the selected type.

Related tools