Linear, Radial and Conic
Switch between the three gradient types with one control.
DESIGN TOOL / CSS
Free CSS Gradient Generator
Design linear, radial and conic CSS gradients visually. Add up to eight color stops, set the angle and copy production-ready CSS.
Pick from presets or generate a random gradient for inspiration. Everything is generated in your browser.
✓ Free to use · No signup required · Processed in your browser
CSS Gradient Generator workspace
CHOOSE A TYPE · ADD COLOR STOPS · COPY THE CSS
Color stops
Presets
Adjust the colors and angle — the CSS updates as you go.
GRADIENT WORKSPACEMOSANKIT / DESIGN & COLOR
THE BASICS
What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, drawn by the browser instead of loaded as an image. Because it is code, it is tiny, scales to any size and never looks blurry.
Linear gradients blend along a line at an angle, radial gradients spread out from a centre point, and conic gradients sweep around a centre like a colour wheel.
BUILT FOR THE JOB
Key Features of MoSanKit CSS Gradient Generator
Up to 8 Color Stops
Add, remove and position as many stops as you need.
Angle Control
Rotate linear and conic gradients from 0 to 360 degrees.
Presets and Random
Start from a preset or roll a random gradient.
Reverse Stops
Flip the whole gradient in one click.
Copy-Ready CSS
Clean background code that works in all modern browsers.
QUICK AND SIMPLE
How to Create a CSS Gradient
01 / TYPE
Pick a type
Linear, radial or conic.
02 / COLORS
Set your color stops
Choose colors and positions.
03 / ANGLE
Adjust the angle
Rotate until it looks right.
04 / COPY
Copy the CSS
Paste it into your stylesheet.
MADE FOR EVERYDAY WORK
Who Can Use This Tool?
Web DesignersCreate backgrounds without image files.
Front-end DevelopersGenerate clean, valid CSS quickly.
UI DesignersPrototype buttons and hero sections.
BloggersStyle banners and cards.
StudentsSee how gradient syntax works.
MarketersMake eye-catching landing page backgrounds.
GOOD TO KNOW
A few things, answered.
Quick answers about using the MoSanKit CSS Gradient Generator.
All modern browsers support linear, radial and conic gradients.
Linear blends along a straight line, radial radiates outward from a centre, and conic rotates around a centre point.
Each stop is a color at a position from 0% to 100%. The browser blends smoothly between stops, and the stops are sorted by position automatically.
Yes. Type a color such as rgba(255,255,255,0) or #ffffff00 in the color box for a fade to transparent.
Up to eight.
No. The CSS is generated entirely in your browser.
KEEP BUILDING
Explore More Design & Color
Smooth color transitions,
zero image files.
Explore more free design and color tools from MoSanKit.