CSS Gradient Generator Online
Create CSS gradients with live preview. No installs, free.
background: linear-gradient(135deg, #667eea, #764ba2);
Why use it
Perfect CSS gradients in seconds
Live preview
See the result as you adjust colors, angles, and positions.
Production-ready code
Modern CSS syntax. No unnecessary vendor prefixes.
Browser compatible
Check compatibility and get the correct code for your target browsers.
No installs needed
Everything in the browser. No Figma, Sketch, or plugins required.
How it works
Three steps, no hassle
Choose the gradient type
Select from linear-gradient, radial-gradient, or conic-gradient. Each type has its own specific controls.
Configure colors and positions
Add as many color stops as you need. Adjust the angle, center position, and percentage for each color using visual controls.
Copy the CSS code
CSS code is generated in real time. Copy the complete background property ready to paste into your stylesheet.
FAQ
Got questions?
A linear gradient (linear-gradient) transitions between colors along a straight line at a defined angle. A radial gradient (radial-gradient) radiates from a center point outward in a circular or elliptical shape. A conic gradient (conic-gradient) transitions around a center point like clock hands — ideal for pie charts or spinning color effects in pure CSS.
Use rgba() or the 'transparent' keyword as a color stop. For example: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) creates a gradient from solid red to fully transparent red. Avoid using 'transparent' directly in gradients over dark backgrounds because browsers interpolate through black (rgba(0,0,0,0)), creating an unwanted grayish artifact.
Linear and radial gradients are supported in all modern browsers since 2012 (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Conic gradients are more recent: supported since Chrome 69 (2018), Firefox 83 (2020), and Safari 12.1 (2019). For projects requiring IE11 support, CSS gradients have no native fallback — use SVG images as an alternative.
Add multiple color stops: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Control each color's exact position using percentages or absolute values (px, em). If you don't specify positions, colors are distributed evenly.
CSS gradients are generated by the browser's GPU and require no network request, making them significantly more efficient than images. However, very complex CSS gradients with many color stops can impact page repaint. For animated gradients, performance may degrade on low-end mobile devices — consider using transform or opacity instead, which are GPU-accelerated properties that don't cause reflow.
CSS gradients: W3C specification history and advanced techniques
CSS gradients have a complex standardization history. The first implementations appeared as proprietary extensions: -webkit-gradient() in Safari 4 (2008) with a syntax completely different from the modern one. Mozilla implemented -moz-linear-gradient() in Firefox 3.6 (2010). The modern, far more intuitive syntax was introduced in the W3C CSS Images Level 3 module, reaching Candidate Recommendation status in 2011 and unprefixed support in Chrome 26 and Firefox 16 in 2012. The conic-gradient() function was proposed by Lea Verou in 2015 and standardized in CSS Images Level 4.
CSS gradients are rendered entirely on the GPU through the browser's compositor layer, unlike rasterized images which require prior CPU decoding. This makes them particularly efficient for large-area backgrounds. Internally, the rendering engine (Skia in Chrome/Edge, WebRender in Firefox) calculates color interpolation in the sRGB color space by default. CSS Color Level 4 introduces interpolation in other color spaces (oklch, display-p3), enabling perceptually more uniform gradients without unwanted color banding.
An advanced technique is the 'gradient halftone', which uses multiple background layers to create dot patterns. Another is using gradients as CSS masks with mask-image: linear-gradient(), enabling element fade-outs without JavaScript. For gradient text effects, background-clip: text is combined with color: transparent — a technique popularized in modern UI design since 2015 and widely used in Apple, Google, and Meta interfaces. Gradients are also the foundation of 'neumorphism' and 'glassmorphism', the dominant design trends from 2019 to 2023.