CSS Gradient Generator

About CSS Gradient Generator

CSS gradients create smooth transitions between colours without using images. This generator supports all three CSS gradient types - linear, radial, and conic - with a visual editor for colour stops, angles, and positions. Adjust sliders, see the result instantly, and copy the generated CSS.

The Three CSS Gradient Types

Type	CSS Function	What It Does	Best For
Linear	linear-gradient()	Transitions along a straight line at any angle	Backgrounds, headers, buttons, overlays
Radial	radial-gradient()	Spreads outward from a centre point	Spotlight effects, vignettes, orbs
Conic	conic-gradient()	Sweeps around a centre point like a colour wheel	Pie charts, loading spinners, decorative rings

Linear gradients are by far the most commonly used. Radial gradients are useful for focus effects. Conic gradients are newer (supported since ~2020) and enable effects that previously required SVG or canvas.

Understanding the Syntax

linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Part	Meaning
135deg	Angle - 0deg goes bottom-to-top, 90deg goes left-to-right, 135deg is diagonal top-left to bottom-right
#667eea 0%	First colour stop at the start (0%)
#764ba2 100%	Second colour stop at the end (100%)

You can add as many colour stops as you want. Each stop has a colour and a position (0-100%). Stops closer together create sharper transitions; stops further apart create smoother fades. If you skip the percentage, the browser distributes stops evenly.

Common Gradient Angles

Angle	Direction	Keyword Equivalent
0deg	Bottom to top	to top
45deg	Bottom-left to top-right	to top right
90deg	Left to right	to right
135deg	Top-left to bottom-right	to bottom right
180deg	Top to bottom (default)	to bottom
270deg	Right to left	to left

Gradient Design Tips

Tip	Why
Use colours from the same hue family	Prevents muddy grey zones in the middle of the transition
Add a mid-stop for smoother blends	A third colour between two stops can eliminate the grey band
Keep text contrast high	Gradient backgrounds make text harder to read - check with a contrast checker
Use opacity for overlays	linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) over an image darkens it for text readability
Animate the background-position, not the gradient itself	Animating gradient definitions is not performant. Instead, create an oversized gradient and animate background-position for smooth movement.

Layering Multiple Gradients

CSS lets you stack multiple backgrounds, including gradients. This enables complex effects without images:

background: linear-gradient(135deg, rgba(102,126,234,0.8) 0%, transparent 50%), linear-gradient(225deg, rgba(118,75,162,0.8) 0%, transparent 50%), #f0f0f0;

The first gradient covers the top-left, the second covers the bottom-right, and the solid colour fills the rest. This technique is used for mesh gradient approximations and decorative hero sections.

Gradients vs Images

	CSS Gradient	Image File
File size	Zero - defined in CSS	Adds to page weight (5-100+ KB)
Resolution independence	Always sharp at any size	Can blur at high DPI or large sizes
Editability	Change colours in code instantly	Requires image editing software
Complexity	Limited to gradient functions	Unlimited visual complexity
Animation	Limited but possible via background-position	Use sprite sheets or CSS animation
Browser support	All modern browsers	Universal

For most background effects, CSS gradients are the better choice - they load instantly, scale perfectly, and are easy to modify. Only reach for images when you need photographic or highly complex textures.

Browser Support

Linear and radial gradients have been supported unprefixed in all major browsers since 2013. Conic gradients reached full support in 2020 (Chrome 69+, Firefox 83+, Safari 12.1+). No vendor prefixes are needed for any gradient type in modern browsers.

Combine your gradients with custom shadows from the CSS Box Shadow Generator for layered visual effects. Check text readability over gradients with the Color Contrast Checker.

All processing happens in your browser. Nothing is uploaded to any server.