cd ..
Design
CSS Gradient Generator
Create beautiful CSS gradients with a live visual editor. Supports linear, radial, conic, and mesh gradients. Export as CSS, Tailwind, SCSS, or SVG. Free online gradient tool.
css linear gradient generatorcss radial gradient toolgradient color picker onlinecss gradient code generatormesh gradient generator
Gradient Type
Angle: 135°
Color Stops
#7c3aed0%
#06b6d4100%
Presets
Export Code
background: #7c3aed; /* Fallback solid color */ background: -webkit-linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); /* Safari 5.1-6, Chrome */ background: -o-linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); /* Opera 11.1-12 */ background: -moz-linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); /* Firefox 3.6-15 */ background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); /* Standard */
Frequently Asked Questions
What is a CSS gradient?+
A CSS gradient is a smooth transition between two or more colors created using CSS — no image files needed, fully scalable.
What's the difference between linear and radial gradients?+
Linear gradients transition along a straight line (e.g. left to right), while radial gradients spread outward from a center point.
Does this tool export Tailwind CSS gradients?+
Yes — it generates Tailwind gradient utility classes including 'from-', 'via-', and 'to-' color stops.