Create a CSS Gradient
Type
Color stops
Pick colors, drag the stops and set the angle while the preview updates, then copy one line of CSS for a button, a hero section or a card background.
- Free
- Runs in your browser
- Up to 8 color stops
- No sign-up
How It Works
Make a gradient in three steps.
Choose a type
Linear for a straight blend, radial from a center, conic around a point.
Adjust stops and angle
Change colors and positions, add stops in between or remove them.
Copy the CSS
Paste the two background lines into your stylesheet.
Linear, radial or conic gradient?
CSS draws gradients without any image file. A linear-gradient blends along a straight line at the angle you set (90deg goes left to right, 180deg top to bottom). A radial-gradient spreads out from the center as a circle or an ellipse that fits the box. A conic-gradient sweeps around the center like a color wheel, which is how pie charts and some loading spinners are drawn in pure CSS.
Blending two saturated opposite colors, such as blue and orange, can pass through a dull grey middle. Adding a brighter stop in between often looks better.
Up to 8 stops
Each stop has a color and a position from 0% to 100%. Two stops at the same position make a hard edge instead of a blend.
Smart new stops
A new stop is placed in the widest gap between existing ones, with the color of the stop before it.
Fallback included
The CSS starts with a solid background in the first color, then the gradient.
Supported everywhere
Linear and radial gradients work in every current browser, and conic gradients in Chrome, Edge, Safari and Firefox releases since 2020.
Convert PDF Files and File Formats
Find the perfect online tool to combine PDF files, compress documents, and handle your daily workflow effortlessly.
PDF Tools
All your PDF needs in one place
- Merge PDF
- Organize PDF
- Split PDF
- Compress PDF
- Convert to Word
- Convert to Image
Image Tools
Edit and optimize your images
- Resize Image
- Compress Image
- Convert Format
- Crop Image
- Add Watermark
- Remove Background
Word Tools
Work with Word documents
- Convert to PDF
- Merge Documents
- Split Documents
- Compress File
- Edit Text
- Add Watermark
Excel Tools
Process Excel spreadsheets
- Convert to PDF
- Convert to CSV
- Merge Sheets
- Split Sheets
- Compress File
- Clean Data
Why Use This Gradient Generator
See it before you write it.
Large live preview
The gradient updates as you drag.
Three types
Linear, radial and conic from one panel.
Clean CSS
Two lines, ready to paste, with a solid color fallback.
No sign-up
Free, in your browser.
Frequently Asked Questions
Questions people ask about the CSS Gradient Generator.
Copy it into the rule for your element, for example .hero { … }. It sets the background property, so it replaces any background color or image on that element.
Give two stops the same position, such as blue at 50% and orange at 50%. The colors then switch at that point without blending.
Add background-clip: text and color: transparent to the element along with the gradient. Most browsers also need -webkit-background-clip: text.
The color pickers choose solid colors. For transparency, edit the copied CSS and replace a color with an rgba() value, for example rgba(0, 0, 0, 0).
Related Text & Developer Tools
More small utilities that run in your browser.
Box Shadow Generator
Design CSS box shadows with live preview.
Color Converter
Convert colors between HEX, RGB, HSL and HSV.
Contrast Checker
Check text and background colors against WCAG.
PX to REM Converter
Convert pixels to rem and rem to pixels.
Number Base Converter
Convert between binary, octal, decimal and hex.