CSS Gradient Generator

About CSS Gradient Generator

How CSS Gradients Work

A CSS gradient is an image value generated by the browser at render time, so it costs zero network bytes and stays crisp at any resolution. The browser interpolates pixel colours between the stops you define, following the geometry of the gradient function (a straight line, a circle, or a sweep around a centre).

Worked example: linear-gradient(135deg, #667eea 0%, #764ba2 100%) paints a box by walking along a 135 degree axis (top-left to bottom-right). At the start it outputs pure #667eea, at the end pure #764ba2, and at the 50% midpoint it blends the two channels: R = (0x66 + 0x76) / 2 = 0x6E, G = (0x7e + 0x4b) / 2 = 0x64, B = (0xea + 0xa2) / 2 = 0xC6 - so the midpoint is roughly #6E64C6. The default interpolation colour space is sRGB, which is why two high-saturation colours on opposite sides of the wheel can produce a muddy grey band in the middle.

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.

Interpolation Colour Spaces (CSS Color Module Level 4)

Modern browsers let you pick the colour space the gradient interpolates through, which changes how the middle of the gradient looks. The default is sRGB, but OKLCH and Oklab produce visually smoother blends because they walk perceptually uniform space rather than RGB.

linear-gradient(in oklch, #667eea, #ffcc00) avoids the muddy grey band you get from linear-gradient(#667eea, #ffcc00) because Oklab is perceptually uniform - equal distances in the space look like equal colour steps to the eye.

Space	When to use	Notes
sRGB (default)	Legacy, matches older browsers	Can produce grey midpoints between complementary colours
oklab	Smooth perceptual blends	Rectangular space, default for modern interpolation
oklch	Hue rotations, rainbow gradients	Polar space, supports shorter/longer/increasing/decreasing hue
hsl / hwb	Hue-based rotations	Polar but not perceptually uniform - use oklch where possible

Per MDN, interpolation colour spaces are part of CSS Color Module Level 4 and are supported in Chrome 111+, Safari 16.2+, and Firefox 113+. Check browser support before shipping to older user bases.

Radial Gradient Shapes and Positions

Radial gradients default to an ellipse that fits the farthest corner of the box, which is rarely what you want. Control the shape with the circle or ellipse keyword, and pick the spread with closest-side, closest-corner, farthest-side, or farthest-corner. Position the centre with an at clause: radial-gradient(circle at top right, #fef3c7, transparent 70%) draws a soft glow anchored in the top right corner, useful for decorative hero panels.

Sizing keyword	Where the last stop lands
closest-side	At the nearest edge of the box
closest-corner	At the nearest corner
farthest-side	At the furthest edge
farthest-corner (default)	At the furthest corner

Pick closest-side for tight spotlights and farthest-corner for background washes. Specifying explicit pixel or percentage radii (e.g. radial-gradient(circle 200px at 30% 40%, ...)) gives full control when you need a fixed size independent of the container.

Conic Gradients in Practice

Conic gradients sweep around a centre like a clock hand, which makes them the simplest way to build pie charts, loading rings, and colour wheels in pure CSS. A pie chart becomes a one-line declaration: conic-gradient(#10b981 0 40%, #f59e0b 40% 75%, #ef4444 75% 100%) produces a 40/35/25 split with no SVG needed. Wrap it in a border-radius: 50% element to turn the square into a disc.

Conic gradients also accept a starting angle (from 90deg) and an optional centre (at 50% 50%). Hue rotation in OKLCH space, added in CSS Color Module Level 4, produces a rainbow conic gradient that avoids the muddy transitions of the sRGB version: conic-gradient(in oklch longer hue, red, red).

Accessibility and Readability

Gradients that look beautiful on a designer's screen often fail WCAG 2.2 contrast checks in the real world. The contrast ratio under a gradient changes along the gradient, so text that is readable over the darker end can fail over the lighter end. Per W3C WCAG 2.2 Success Criterion 1.4.3, body text needs a contrast ratio of at least 4.5:1 against its background, and large text (18pt or 14pt bold) needs at least 3:1.

Practical rules:

• Test contrast at both ends of the gradient, not just the average
• Add a semi-opaque dark layer over photos or multi-colour gradients: background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(hero.jpg)
• Give text a solid fallback colour for users whose browsers do not support gradients (the background-color property paints underneath background-image)
• Honour prefers-reduced-motion if the gradient animates - static gradients are fine, but moving ones can trigger vestibular discomfort

Common Mistakes

Mistake	Why it hurts	Fix
Grey midpoint between complementary colours	sRGB averages the RGB channels, killing saturation	Add in oklab or insert a mid colour stop
Unreadable text on top of a gradient	Contrast drops near the middle of the blend	Test both ends with the Color Contrast Checker, add a semi-opaque overlay
Visible banding in subtle gradients	8-bit colour steps are visible across low-contrast ranges	Add 1-2% noise, use wider colour gaps, or output in a higher bit depth canvas
Animating the gradient string	The browser cannot interpolate between two different background-image values	Animate background-position on an oversized gradient instead
Using to top but expecting 0deg	Keyword and angle syntax both go to top - this one is fine	But 90deg is to right, not to top - measure from the 12 o clock position clockwise

Browser Support

Linear and radial gradients have been supported unprefixed in every major browser since 2013 (per Can I Use, 100% support today). Conic gradients reached full support in 2020 - Chrome 69, Firefox 83, Safari 12.1 - and now cover roughly 95%+ of global traffic. No vendor prefixes are needed for any gradient type in modern browsers. The @supports rule can gate conic-specific features for older browsers: @supports (background: conic-gradient(red, blue)) { ... }.

Fine-tune the shape of your gradient box with the CSS Border Radius Generator, pair it with layered shadows from the CSS Box Shadow Generator, or convert individual colour values between HEX, RGB, HSL, and OKLCH with the Color Converter.

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

Sources

• MDN - linear-gradient()
• MDN - radial-gradient()
• MDN - conic-gradient()
• MDN - color-interpolation-method
• Can I Use - CSS Conic Gradients
• W3C - CSS Images Module Level 3
• W3C - CSS Color Module Level 4