CSS Gradient Generator
Create beautiful CSS gradients with live preview. Supports linear, radial, and conic gradients with multiple color stops.
Direction & Angle
Color Stops
Preset Gradients
CSS Output
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
.gradient {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}bg-[linear-gradient(135deg,#3b82f6_0%,#8b5cf6_100%)]
What is a CSS Gradient?
CSS gradients create smooth transitions between two or more colors using pure CSS — no images needed. CSS supports linear (straight line), radial (circular/elliptical), and conic (color wheel) gradients. This generator lets you create gradients visually, choose from 24 presets, control direction and color stops, and copy the CSS code.
Common Use Cases
- •Creating background gradients for hero sections and banners
- •Designing button hover effects with gradient transitions
- •Building gradient text effects using background-clip
- •Creating gradient borders and overlay effects
- •Generating gradient CSS for Tailwind arbitrary values
Frequently Asked Questions
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line (top to bottom, left to right, or any angle). Radial gradients transition from a center point outward in a circle or ellipse. Conic gradients rotate colors around a center point like a color wheel.
Do CSS gradients affect performance?
CSS gradients are rendered by the GPU and are very efficient — much better than gradient images. They scale perfectly at any resolution, work on all modern browsers, and don't add any HTTP requests. They're a best practice over gradient images.