CSS Gradient Generator
Create linear and radial CSS gradients with a live preview and copy-ready code.
Runs locally — nothing is uploaded
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
QR Code Generator
Create styled QR codes for links, Wi‑Fi, contacts, and more. Logo and colors stay in your browser.
Developer Tools
Barcode Generator
Generate CODE128, EAN13, UPC, and CODE39 barcodes from text. Download as PNG.
Developer Tools
JSON Formatter
Format, validate, and minify JSON with clear error messages.
Developer Tools
Base64 Encoder / Decoder
Encode and decode text or images to Base64. Works entirely offline.
Developer Tools