CSS Gradient Generator
Build linear, radial & conic CSS gradients and copy the code.
Create stunning CSS gradients with a live preview: choose linear, radial or conic, add as many colour stops as you like, drag the angle, then copy ready-to-paste CSS. Great for backgrounds, buttons and hero sections. Runs fully in your browser — nothing is uploaded.
How to use CSS Gradient Generator
Pick a gradient type
Choose linear, radial or conic to set how your CSS gradient flows, then preview the result instantly in your browser as you tweak it.
Add color stops
Click the interactive bar to add a color stop and drag any handle to reposition it, building a custom gradient with as many colors as you like.
Edit each stop
Select a stop to change its color with the picker or hex field and lower its opacity slider for smooth fades to transparent rgba colors.
Adjust direction
Set the angle for linear and conic gradients, or pick the shape and position for radial gradients, and toggle repeating mode for stripe patterns.
Load a preset
Start fast from a curated gradient preset or hit Random, then refine the colors to match your brand using this free online CSS gradient generator.
Copy the code
Switch the output to CSS, background-image, Tailwind or SCSS and copy the ready-to-use code straight into your stylesheet or component.
Frequently asked questions
How do I create a CSS gradient?
Choose linear, radial or conic, set your colour stops (click the bar to add one, drag to move), tweak the angle, opacity and position, then copy the generated CSS into your stylesheet.
What's a conic vs radial gradient?
A radial gradient radiates outward from a point (great for spotlights and circles); a conic gradient sweeps around a point like a colour wheel (great for pie charts and rings). Linear gradients run in a straight line at the angle you set.
Can I use transparency?
Yes — select a stop and lower its Opacity slider. The stop is emitted as an rgba() value so you can fade a gradient to transparent.
What does 'repeating' do?
It tiles your colour stops across the element instead of stretching them once, which is how you make stripes and pattern effects. Keep your last stop well under 100% to see the repeat.
How do I make a CSS gradient background for my website?
Build the gradient on the bar above, then copy the generated code and paste it as a background or background-image rule on any element. This CSS gradient generator gives you ready-to-use CSS, background-image, Tailwind and SCSS output, so it drops straight into your stylesheet or component.
Can I get a Tailwind CSS gradient class from this generator?
Yes — switch the output tab to Tailwind and copy the arbitrary-value class (e.g. bg-[linear-gradient(...)]). It’s the fastest way to add a custom linear, radial or conic gradient to a Tailwind project without writing the CSS by hand.
Is my data uploaded anywhere?
No. The gradient is generated entirely in your browser — nothing is sent to or stored on a server.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.