ToolStack

Gradient Generator

Create CSS linear and radial gradients visually and copy the CSS code.

100% private — everything runs in your browser

Advertisement

How to Use

  1. 1

    Choose Linear or Radial — linear gradients can also be angled from 0° to 360°.

  2. 2

    Pick each stop's color and drag its slider to set the position (0–100%).

  3. 3

    Add up to eight stops, or remove the ones you do not need.

  4. 4

    Copy the generated CSS and paste it into your stylesheet.

Examples

Blue to purple (default)

Input

Linear · 135° · #3B82F6 0% → #8B5CF6 100%

Output

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

Three-stop radial

Input

Radial · #F59E0B → #EF4444 → #8B5CF6

Output

background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);

FAQ

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line at the angle you set; a radial gradient radiates outward from the center.

Which browsers support the generated CSS?

All modern browsers support standard linear-gradient() and radial-gradient() — no vendor prefixes needed.

How many color stops can I use?

Up to eight. Each stop has its own color and a position slider from 0% to 100%.

Related Tools

CSS Color GeneratorTurn a base color into a 10-step shade scale and export it as CSS variables.Color PickerPick any color and copy its HEX, RGB, HSL and HSV values instantly.Color ConverterConvert between HEX, RGB, HSL, HSV and HWB color formats in any direction.HEX to RGBConvert HEX color codes to RGB values instantly — free and private.RGB to HEXConvert RGB values to a HEX color code instantly — free and private.Contrast CheckerCheck the WCAG contrast ratio between text and background colors instantly.