CSS Gradient Generator
Create linear and radial CSS gradients with a live preview and copy-ready code.
Type
Colors
How to use
- 1
Choose linear or radial
Select a linear gradient for directional blends or a radial gradient for circular color spreads from the center outward.
- 2
Set colors and angle
Pick color stops with the color inputs, adjust the angle for linear gradients, and add or remove stops (up to six colors).
- 3
Preview the gradient live
A large preview box updates in real time so you can fine-tune colors and direction before copying the code.
- 4
Copy the CSS
Click copy to get a ready-to-paste background property for your stylesheet, Tailwind arbitrary value, or inline style.
Frequently Asked Questions
It produces a complete background declaration — either linear-gradient(angle, colors) or radial-gradient(circle, colors) — ready to paste into your CSS.
You can use between two and six colors. Add stops with the plus button and remove extras with the trash icon (minimum two colors).
For linear gradients, the angle in degrees controls direction — 0° points upward, 90° to the right, and 180° downward. Radial gradients ignore the angle.
Yes. Paste the background value into your CSS file, use it as an inline style in React, or wrap it in Tailwind's arbitrary value syntax.
Related tools
Compress Image
Reduce JPG and PNG file size with adjustable quality. No upload required.
Image Resizer
Resize images to exact pixel dimensions with optional aspect ratio lock.
Crop Image
Crop images with a draggable selection and optional fixed aspect ratios.
Image Converter
Convert images between PNG, JPG, and WebP formats in your browser.