CSS Gradient Generator

Design Tools

Create linear & radial CSS gradients

FreePrivateInstant
Type
Angle (° for linear)
Color 1
Color 2
Color 3
Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

CSS Button GeneratorDesign buttons and copy the CSS
CSS Animation GeneratorReady CSS keyframes with live preview
CSS Grid GeneratorVisual CSS grid builder with code to copy
CSS Text Shadow GeneratorCreate glow and drop shadows for text
Border Radius GeneratorMake rounded corners and blobs in CSS
CSS Box Shadow GeneratorVisual box-shadow builder with CSS output

History

All history →

CSS Gradient Generator — at a glance

Pick your colors, set the angle and copy the CSS for a smooth gradient background.

Colors
#6366f1
#ec4899
135°
Run
CSS
background: linear-gradient(135deg, …)

How to use it — step by step

Nothing to paste. Choose colors and direction, then generate.

1

Choose options

Pick the mode and options that fit what you need.

2

Generate Gradient

Press the button. The result is created instantly on your device.

3

Copy the result

Check the output and press Copy to use it anywhere.

Pro tips

Small things that make the result better.

✦135° gives a diagonal gradient from top-left to bottom-right.
✦Use colors that sit close on the color wheel for a soft look.
✦Add a solid background-color as a fallback for old browsers.

Quick facts

Linear & radialtwo types
3 colorssupported
Live previewbefore copying
Freeno signup

Frequently Asked Questions

How do I use the CSS?+

Paste the copied line into any CSS rule, for example inside body or .hero.

What does the angle do?+

0° goes bottom to top, 90° left to right, 180° top to bottom.

Can I use more than three colors?+

Not here, but in CSS you can list as many colors as you like separated by commas.

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

More Free Tools

Guides you might like

All guides →
Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to use
PX to REM Converterpx vs rem: why your font sizes should be allowed to scale
Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises
Color Contrast CheckerIs your text readable? The contrast ratio, explained