Free CSS Gradient Generator

CSS Gradients: Smooth Color Without Image Files

A CSS gradient is a smooth transition between two or more colors, generated by the browser as a vector image. Unlike a PNG or JPG background, a gradient adds zero kilobytes to your page weight, scales pixel-perfectly to any resolution (Retina displays, 4K monitors, print) and recolours instantly when you change a CSS variable. They are defined using the background-image property with one of three functions: linear-gradient() for transitions along a straight line, radial-gradient() for transitions from a centre outward in a circle or ellipse, or conic-gradient() for transitions that rotate around a centre point. This generator covers linear and radial gradients, the two most common cases that make up roughly 95% of production use.

A Short History of CSS Gradients

CSS gradients are defined in the CSS Image Values and Replaced Content Module Level 3, maintained by the W3C CSS Working Group and edited by Tab Atkins Jr. and Elika J. Etemad among others. The First Public Working Draft was 12 July 2011; the spec reached Candidate Recommendation on 17 April 2012, locking the modern unprefixed syntax, including the convention that 0deg points upward (toward the top) and to right equals 90deg. Browser shipping order: WebKit was first by a wide margin, with -webkit-gradient() usable in Safari 4 (2009) using a function-call-heavy syntax. Firefox shipped -moz-linear-gradient() in Firefox 3.6 on 21 January 2010; Internet Explorer 10 shipped the unprefixed forms in 2012; the unprefixed syntax stabilised across all major engines by late 2013. conic-gradient() was specified later in CSS Images Level 4, Lea Verou drafted the proposal in 2011, Tab Atkins added it to the spec in 2012, and native shipping arrived in Chrome 69 (4 September 2018), Safari 12.1 (25 March 2019) and Firefox 83 (17 November 2020). In 2026 you can write background: linear-gradient(...) and background: radial-gradient(...) confidently with no prefixes and no fallbacks for any browser worth supporting.

linear-gradient: Angles, Sides, and the Diagonal Subtlety

The formal grammar is linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). The angle convention frequently trips developers up because it differs from the SVG/canvas convention. 0deg equals to top: the gradient line points upward, so the last colour appears at the top. 90deg equals to right. 180deg equals to bottom (the default if no direction is given). 270deg equals to left. 135deg is the canonical diagonal, top-left to bottom-right, the most common gradient direction in modern web design. Increasing angles rotate clockwise from top, opposite to the mathematical convention (where 0 is right and angles increase counter-clockwise) and opposite to SVG's <linearGradient>. A useful subtlety: to right and 90deg are equivalent only on square boxes. On a non-square box, to top right produces a gradient line exactly perpendicular to the diagonal from the bottom-left corner (meaning the gradient hits the corner cleanly) while 45deg is always literally 45 degrees regardless of aspect ratio. For most hero backgrounds this distinction doesn't matter; for precisely-aligned designs it can.

radial-gradient: Shapes, Sizes and Position

The grammar is radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Two shape values: circle (perfect circle scaled to the box) and ellipse (default, stretched to the box's aspect ratio). The size can be one of four extent keywords or explicit lengths/percentages. closest-side: ending shape touches the nearest side. closest-corner: ending shape passes exactly through the closest corner. farthest-side: ending shape touches the farthest side. farthest-corner (the default): ending shape passes through the farthest corner. The at <position> clause moves the centre, at top left, at 30% 70%, etc. The default centre is at center center. Radial gradients are how you make spotlight effects, soft glows, "vignette" backgrounds where the edges darken toward black, and circular badge backgrounds. They're noticeably less common than linear gradients in 2026 production use (most "gradient" backgrounds you see on landing pages are linear) but they're indispensable for the cases where linear can't reach.

Color Stops, The Heart of a Gradient

A color stop is a colour value with an optional position along the gradient line. linear-gradient(red, blue) places red at 0% and blue at 100%, with a smooth interpolation between. linear-gradient(red 0%, yellow 50%, blue 100%) adds a yellow stop in the middle. Stops with explicit positions can be placed anywhere from 0% to 100%, and stops without explicit positions are distributed evenly between their explicit-position neighbours. Hard color stops: two stops at the same position, like linear-gradient(red 50%, blue 50%): produce an instantaneous transition rather than a smooth blend. This is the trick behind every CSS pattern: stripes, checkerboards, dots, all built from gradient stacks with hard stops. Color interpolation hints (CSS Images Level 4): inserting a bare percentage between two stops biases where the midpoint of the interpolation falls. linear-gradient(red, 25%, blue) shifts the perceptual midpoint to 25% rather than the default 50%, useful for subtly weighting one colour over the other. Modern colour-space interpolation (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) interpolates in the perceptually-uniform Oklab colour space rather than gamma-encoded sRGB, producing smoother transitions through the middle without the muddy grey "dead zone" that sRGB interpolation produces between high-chroma complementary colours. The default is still in oklab (or in srgb in older browsers), for hand-built gradients you can opt in.

Modern Color Spaces, Why oklch Gradients Look Better

For two decades, every CSS gradient interpolated colour values in sRGB: the gamma-encoded colour space the web grew up with. sRGB interpolation has a well-known failure mode: gradients between high-chroma complementary colours (red ↔ green, blue ↔ yellow, magenta ↔ cyan) pass through a muddy grey midpoint. Try linear-gradient(red, green) in sRGB and the middle is brown, not the bright olive your eyes expect. Oklab (Björn Ottosson, December 2020) is a perceptually-uniform colour space designed specifically to fix this. OKLCH is the cylindrical form of Oklab, the three coordinates are Lightness (0-100%), Chroma (0+), and Hue (0-360°). Gradients in OKLCH stay perceptually smooth across the entire transition, with the brightness ramping evenly and the hue rotating predictably through the colour wheel. The CSS Color Module 4 specification added <color-interpolation-method> as a parameter to gradient functions: linear-gradient(in oklch, red, blue). Browser support reached baseline in mid-to-late 2023 (Safari 16.4 March 2023, Chrome 111 March 2023, Firefox 113 May 2023). For gradients used in production design systems, the OKLCH option is increasingly the right choice; this generator currently emits sRGB-default gradients and the OKLCH toggle is on the roadmap.

Performance, Gradients Are Cheap, but Not Free

CSS gradients are GPU-accelerated on every modern browser, which makes them dramatically faster than tiled bitmap images for most use cases, no HTTP request, no decode, vector-resolution-independent, instantly recolourable through CSS variables. The trade-offs to know about: paint cost scales with pixels touched and gradient complexity; gradients are among the more expensive things a browser can paint, and stacking many gradient layers across a full-viewport hero can cost frames on lower-end GPUs. Animating gradient colours triggers a full repaint every frame: much more expensive than animating transform or opacity. The modern fix is to use @property registered custom properties (Houdini Properties and Values API), which lets the browser interpolate colour values on the compositor thread instead of the main thread; supported in Chrome 78+ (Nov 2019), Safari 16.4+ (Mar 2023), Firefox 128+ (Jul 2024). The cheaper traditional alternative is to animate background-position on a fixed gradient, a true compositor-only animation that runs at 60fps everywhere. The general performance heuristic: if your page has a single static gradient, you'll never notice; if you're stacking five animated gradient layers on every card in a long list, profile it before shipping.

Where Gradients Earn Their Keep

• Hero section backgrounds. Soft brand-colour gradients behind the page title, often with subtle radial overlays for atmospheric depth. Stripe, Linear and most modern SaaS landing pages lean on this.
• Button styling. Subtle gradients on primary CTA buttons add tactile depth that flat solid colours don't have. Add a slightly-darker hover-state gradient and the button feels alive.
• Image overlays for text readability. A vertical linear-gradient fading from transparent at the top to dark at the bottom, layered on top of a hero image with white text in the dark zone, makes the text legible regardless of what the photo looks like.
• Card backgrounds. Subtle gradients on card backgrounds add depth without heavy box-shadow.
• Loading skeletons and progress indicators. The classic shimmer skeleton is a linear gradient with semi-transparent white moving across a grey background, animated via background-position.
• Glassmorphism and modern UI styling. The frosted-glass effect popularised by macOS Big Sur and iOS, a semi-transparent background with backdrop-filter blur, often layered with a subtle gradient for the highlight effect.
• Mesh-gradient look-alikes. Real CSS mesh gradients aren't standard yet (CSS Images Level 5 will eventually add them), but stacking 3-5 large radial gradients with semi-transparent colours produces a convincing mesh-gradient effect today.

Honest Scope: What This Generator Does and Doesn't

This tool generates linear and radial CSS gradients with a live preview, configurable angle (for linear) or position (for radial), and any number of colour stops with positions. It emits the modern unprefixed syntax. What this tool does not currently do, that more elaborate generators handle: conic gradients (the rotating-around-a-centre variety, used for pie charts, sunbursts and colour wheels), see Absolutool's CSS Pattern Generator for some conic-pattern examples; repeating gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) for stripes and pattern-style fills (also handled in the CSS Pattern Generator; OKLCH / Oklab interpolation toggle (the modern perceptually-uniform colour space)) currently emits sRGB-default; color hint syntax for biasing the midpoint between stops; multi-stop animation keyframes. For most production gradients (hero backgrounds, button styles, overlay effects), linear + radial covers the use case; for the more exotic cases the CSS Pattern Generator is the right complementary tool.

Frequently Asked Questions

Are CSS gradients supported in all browsers?

Yes. Linear and radial gradients have been baseline in all major browsers since late 2013 with no vendor prefixes needed. Conic gradients (not in this generator) shipped Chrome 69 (4 September 2018), Safari 12.1 (25 March 2019) and Firefox 83 (17 November 2020). Microsoft Edge dropped its EdgeHTML engine in January 2020 and IE11 reached end-of-life on 15 June 2022; both are now historical footnotes for any new tool.

What angle should I use for a diagonal gradient?

135deg creates the canonical top-left to bottom-right diagonal, the most common gradient direction in modern web design. 45deg goes bottom-left to top-right. 90deg is left-to-right. 180deg is top-to-bottom (also the default if you omit the angle entirely). The angle convention rotates clockwise from straight up, the opposite of mathematical convention. Note: on non-square boxes, to top right guarantees the gradient hits the corner cleanly while 45deg is literally 45° regardless of aspect ratio.

Can I use more than two colors?

Yes. Click "Add Stop" to add additional color stops. The CSS spec has no upper limit; this generator allows up to 8 stops per gradient. Multi-stop gradients create richer visual effects, a sunset from orange through pink to purple, or a rainbow through all six colour-wheel hues. For perceptually-smooth multi-stop transitions, the modern OKLCH interpolation gives noticeably better results than the default sRGB; this generator currently emits sRGB-default but the OKLCH toggle is on the roadmap.

Why isn't there a conic gradient option?

Conic gradients (the rotating-around-a-centre variety, used for pie charts, sunbursts and colour wheels) are a different design problem from linear and radial gradients, the parameters are angles around a centre rather than positions along a line. For conic-gradient examples and patterns, use Absolutool's CSS Pattern Generator, which handles the more exotic cases (conic, repeating-linear, repeating-conic) for pattern-style fills. This generator focuses on the linear+radial cases that cover the bulk of production hero-and-button gradients.

Are CSS gradients faster than image backgrounds?

For most cases, yes, a CSS gradient eliminates an HTTP request, a decode pass, and the multi-resolution asset shipping required for retina displays. The gradient is also vector-perfect at any zoom and trivially recolourable through CSS variables. Trade-offs: gradients are GPU-painted but the paint cost scales with pixel area and stop complexity; stacking many gradient layers across a full-viewport hero can cost frames on lower-end GPUs. For animation, animate background-position (compositor-only, cheap) rather than gradient colour stops (full repaint, expensive). Single static gradients on cards or hero sections, never noticeable.

Is my data sent anywhere?

No. Generation runs entirely in your browser, colour pickers, angle slider and CSS code generation all run locally. There are no outbound requests when you use the controls. The generated CSS is yours to paste anywhere.

Related Tools