ColorFree browser tool

CSS Gradient Generator – Create Gradients

Generate CSS gradients. Create linear gradients with live preview and code.

No sign-upMobile readyPrivate by default
CLR

Tool

Enter your values and get results instantly.

background: linear-gradient(90deg, #3B82F6, #8B5CF6);
HOW

How to Use

  1. 1Pick two colors
  2. 2Adjust angle
  3. 3See live preview
  4. 4Copy CSS code
WIN

Benefits

Live preview
CSS code ready
Color pickers
Free
Web design tool
FAQ

Frequently Asked Questions

How do I create a CSS gradient?

Pick your start and end colors using the color pickers, adjust the angle slider, and the tool generates the CSS code. Copy and paste it into your stylesheet.

What angle should I use?

0 degrees goes bottom to top. 90 degrees goes left to right. 180 degrees goes top to bottom. Experiment with the slider to find the perfect angle.

Can I create diagonal gradients?

Yes – set the angle to 45 degrees for a diagonal gradient, or any value between 0 and 360.

Does this support multiple color stops?

The current version creates two-color gradients. For multi-stop gradients, you can manually add more colors to the generated CSS.

Can I use this for my website?

Absolutely – the generated CSS works in all modern browsers and is perfect for backgrounds, buttons, and headers.