Gradient Generator
Online CSS gradient generator, create linear and radial gradients, visually adjust and copy code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);What is CSS Gradient?
The Gradient tool helps create CSS color gradients for interfaces, backgrounds, buttons, charts, and design prototypes. Instead of hand-writing every linear or radial gradient value, you can adjust colors, stops, direction, angle, and opacity while seeing the result immediately. Designers reach for it when a gradient has to fit a brand palette, keep text readable, or transition smoothly between UI states. The generated CSS is only the implementation detail; the important part is choosing a gradient that supports the content, preserves contrast, and does not turn into visual noise on different screens.
How to Use
How to use
- Select gradient type: Linear or Radial
- Add color stops and adjust each color's position
- Linear gradients can set angle direction (0-360 degrees)
- Preview gradient effect in real-time
- Click 'Copy Code' to get CSS code
- Select presets to quickly apply common gradients
CSS Usage Tips
- Check contrast and readability when placing text over a gradient; attractive colors can still fail accessibility needs.
- Test the generated CSS in the real container because gradient direction and stop positions feel different at different aspect ratios.
Use Cases
Technical Principle
CSS gradients are image values, not colors — linear-gradient(), radial-gradient(), and conic-gradient() resolve to <image> tokens that the browser rasterizes inside any background-image, mask-image, or border-image slot. The linear form takes an angle (0deg points up, 90deg points right, increasing clockwise) or a 'to <side>' keyword which is computed from the box diagonal, followed by a comma-separated list of color stops with optional percentage or length positions. The radial form accepts a shape (circle | ellipse), a size keyword (closest-side, farthest-corner is the default), and an 'at <position>' anchor. The conic form sweeps stops around a hub starting at 'from <angle>' and is supported in Chrome 69+, Safari 12.1+, and Firefox 83+.<br /><br />Color interpolation defaults to sRGB, which is perceptually non-uniform and produces a muddy grey band between distant hues like blue and yellow. CSS Color Level 4 introduced explicit color spaces via the 'in <colorspace>' syntax — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — so transitions stay chromatic across the spectrum. Hard color bands are produced by giving two stops the same position ('red 50%, blue 50%') and color hints shift the midpoint without inserting a stop ('red, 20%, blue').<br /><br />When a gradient needs to leave the CSS pipeline, Canvas exposes the same primitives: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1), and createConicGradient(startAngle, x, y) return CanvasGradient objects that accept addColorStop(offset, color) and can be assigned to fillStyle before exporting via toDataURL('image/png'). SVG offers the markup equivalents <linearGradient> and <radialGradient> with spreadMethod values 'pad' (default), 'reflect', and 'repeat' for tiling behavior.
- Linear form: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) — 0deg points up, increases clockwise; 'to bottom right' is computed per box dimensions, not as a literal 135deg
- Radial form: radial-gradient([<shape> <size>]? at <position>, <stops>) — size keywords closest-side, closest-corner, farthest-side, farthest-corner (default)
- Conic form: conic-gradient(from <angle> at <position>, <stops>) — sweeps around the hub; Chrome 69+, Safari 12.1+, Firefox 83+
- Color interpolation: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' overrides the perceptually non-uniform sRGB default that causes mid-grey bands between distant hues
- Hard stops and hints: two stops at the same position ('red 50%, blue 50%') make a sharp band; a bare percentage ('red, 20%, blue') is a color hint that moves the 50% mix point
- Canvas API: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) return CanvasGradient; addColorStop(offset, color) then assign to fillStyle
- SVG equivalents: <linearGradient> and <radialGradient> with spreadMethod='pad'|'reflect'|'repeat' control tiling beyond the gradient bounds
Examples
Simple two-color gradient (135deg)
background: linear-gradient(135deg, #667eea, #764ba2);
Use: hero banners, section dividers; the 135deg direction gives a soft diagonal flowMulti-stop linear gradient
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
Note: three color stops at fixed percentages create a sunset-style fade; add more stops for richer transitionsRadial gradient (circle)
background: radial-gradient(circle, #fff 0%, #000 100%);
Use: vignette effects, spotlight highlights; the 'circle' shape keyword keeps the gradient round regardless of the box sizeFAQ
What gradient types can I generate?
CSS linear-gradient (default), radial-gradient, and conic-gradient. Linear runs straight; radial fans out from a center point; conic sweeps around a center like a pie chart. Each has its own shape parameters in the editor.
How many color stops can I add?
There is no hard limit, but more than ~10 stops makes editing fiddly and increases the rendered CSS size. Most aesthetic gradients use 2-4 colors. The page lets you drag stops along the gradient track to fine-tune positions.
What output formats are available?
Standard CSS background-image syntax, ready to paste into a stylesheet. Some builds also export PNG (rasterised at the chosen size), SVG (vector), or Tailwind CSS arbitrary-value syntax.
Why does my gradient look 'banded'?
Gradients with similar colors and a small color range can show visible banding because the screen has only 256 levels per channel. Add slight noise (CSS filter or an SVG noise overlay) or pick more contrasting endpoints. Some browsers also dither gradients better than others.
How do I make a 'mesh' or 'multi-direction' gradient?
CSS doesn't have a native mesh gradient. Approximate it by stacking multiple radial-gradients with transparency in the same background-image (multiple backgrounds, comma-separated). The page may have a 'multi-stop' mode that does this automatically.
What about transparency?
Color stops accept alpha (rgba or 8-digit hex with alpha). Use this to fade a gradient into a background or to layer multiple gradients. Modern browsers fully support alpha in gradient stops.
Is the gradient generated locally?
Yes. Everything happens in your browser. Generated CSS is just text and the rasterised export uses canvas - no data is uploaded.