CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview. Tweak the angle and color stops, then copy clean CSS or a Tailwind class — free and no sign-up.
Type
Angle: 135°
Color stops
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Tailwind CSS
bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)]How to use the CSS gradient generator
- Choose a linear or radial gradient type.
- For linear gradients, drag the angle slider to set the direction.
- Pick colors and adjust each color stop position (0–100%).
- Add or remove stops to create multi-color blends.
- Copy the generated CSS or Tailwind code.
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, rendered by the browser as an image you can use anywhere a background is allowed. Because gradients are generated in CSS, they stay crisp at any resolution and add zero network requests — unlike background images.
Gradients are perfect for hero sections, buttons, cards, and backgrounds. Pair this tool with our HEX to RGB converter to fine-tune your palette, or build full layouts with the CSS grid & flexbox generator.
Frequently asked questions
Is this CSS gradient generator free?
Yes. It's completely free, requires no sign-up, and runs entirely in your browser — nothing is uploaded to a server.
What's the difference between a linear and radial gradient?
A linear gradient transitions colors along a straight line at a chosen angle, while a radial gradient transitions outward from a center point in a circular shape.
Can I use more than two colors?
Yes. Click 'Add stop' to add as many color stops as you like, and drag each stop's position to control where the colors blend.
Does it output Tailwind CSS?
Yes. Alongside standard CSS, the generator gives you a Tailwind arbitrary-value class (bg-[linear-gradient(...)]) you can paste straight into your markup.
Need a whole screen, not just a snippet?Describe an app screen and MakeUI generates editable UI you can export to Figma or code.
Try MakeUI