CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a visual editor — customize colors, angles, and positions, then copy the CSS code.
Preview
CSS Code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Tailwind CSS
bg-gradient-to-br from-[#667eea] to-[#764ba2]
Settings
Presets
Related Articles
Learn more about this topic
Related Tools
You might also find these useful
Everything you need to know
Visual Gradient Builder
See your gradient update in real time as you adjust colors, angles, and positions. The large preview panel shows exactly how the gradient will look, so you can fine-tune every detail before copying the CSS.
Linear & Radial Gradients
Choose between linear gradients with customizable angles (0°–360°) and radial gradients with circle or ellipse shapes. Quick angle presets (0°, 45°, 90°, 135°, 180°, 270°) let you jump to common directions.
Multiple Color Stops
Start with two colors and add as many stops as you want. Each stop has a color picker and position slider (0–100%). Drag the sliders to control exactly where each color transition happens.
Gradient Presets
Browse 8 beautiful preset gradients — Sunset, Ocean, Forest, Fire, Sky, Candy, Northern Lights, and Twilight. Click any preset to load it, then customize to make it your own.
One-Click CSS Copy
The generated CSS code is displayed at the bottom and ready to copy with one click. Paste directly into your stylesheet — the output uses standard background syntax that works in all modern browsers.
Related Tools
Convert colors between formats with the Color Converter, generate hex codes with the Number Base Converter, or format your CSS with the JSON Formatter.