CSS Gradient Generator
Design linear and radial gradients with a live preview. Add color stops, control direction, copy production CSS instantly.
Presets
Gradient Type
Color Stops (2)
Generated CSS
background: linear-gradient(135deg, #6c5cf7 0%, #00d9ac 100%);
CSS Gradients: Functions, Color Stops & Practical Use
1. linear-gradient() vs radial-gradient()
linear-gradient(angle, colors) transitions colors along a straight line — 0deg points up, 90deg points right, 180deg points down, matching a clock face rotated so 12 is up. radial-gradient(shape, colors) transitions colors outward from a center point in a circle (or ellipse, matching the element's aspect ratio if unspecified). This tool defaults radial gradients to circle shape for predictable, consistent results across different element sizes.
2. How to Use This Generator
Start from a preset (Ocean, Sunset, Nimbica, Dark Glass, Aurora, Mango) or build from scratch: pick Linear or Radial, set the angle (linear only — drag the slider or click a common angle button), then add, remove, or adjust color stops with the color picker and position slider for each. The live preview box and generated CSS update instantly. Toggle “Repeating gradient” to tile the pattern instead of stretching it once. Click “Copy CSS” and paste the background: declaration into your stylesheet, theme Customizer, or block editor's Additional CSS panel.
3. Working with Color Stops
Each color stop is a color plus a position (0-100%) along the gradient axis. Two stops at 0% and 100% produce a smooth two-color blend. Adding a third stop in the middle (like the Sunset preset's 0/50/100 split) creates a smoother multi-color transition without an abrupt jump. Placing two stops at the exact same position creates a hard, sharp color boundary instead of a smooth blend — a technique useful for CSS-only stripe patterns when combined with the repeating option.
4. Why CSS Gradients Beat Image Gradients
A gradient exported as a JPG or PNG background image requires an HTTP request, image decode time, and file bytes downloaded — all avoidable overhead for something the browser can compute instantly from a short CSS string. Beyond the performance win, CSS gradients scale losslessly to any element size (no pixelation at large sizes the way a raster image would show), and they're trivially editable — changing a hex code takes a text edit, not re-exporting an image asset.
5. Common Mistakes
A frequent mistake is using colors with insufficient contrast between adjacent stops, producing a muddy, low-impact gradient — pairing colors from opposite sides of the color wheel (like the Ocean or Sunset presets) generally reads more vibrantly than adjacent hues. Another is forgetting that text placed directly on a gradient background needs sufficient contrast against the darkest part of the gradient, not just the average color, to remain readable and accessible. Finally, be cautious with very high-contrast multi-stop gradients on large background areas — they can visually compete with foreground content rather than recede behind it.
6. Limitations
This generator covers linear and radial gradients, which handle the large majority of real-world use cases, but does not generate conic-gradient() (rotational/pie-chart-style gradients) or mesh gradients (multi-point organic color blends), both of which require different CSS functions or additional tooling entirely. Radial gradients here always use a centered circle shape — off-center or elliptical radial gradients need manual CSS editing after copying the generated output.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file required. They are created with the linear-gradient(), radial-gradient(), or conic-gradient() CSS functions and applied as a background-image.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates outward from a center point in a circular or elliptical shape.
Can I use gradients as backgrounds in WordPress themes?
Yes. Copy the generated CSS and paste it into your theme's Customizer under Additional CSS, a Full-Site Editor block's style panel, or directly into your theme's stylesheet. Gradients have full browser support in all modern browsers.
What are color stops?
Color stops define where each color appears along the gradient axis. You can set multiple stops at different positions (e.g. 0%, 50%, 100%) to create multi-color gradients or hard transitions.
What does "repeating gradient" do?
Toggling repeating uses `repeating-linear-gradient()` or `repeating-radial-gradient()` instead of the standard function, which tiles your color-stop pattern continuously rather than stretching it once across the element — useful for creating stripes or concentric ring patterns.
Do CSS gradients affect page performance the way image files do?
No — CSS gradients are computed by the browser's rendering engine and require no network request or image decode, unlike a JPG or PNG gradient background. This makes them a genuinely faster alternative to a gradient image file for backgrounds, with no additional HTTP request or bytes downloaded.
Can I layer multiple gradients on one element?
Yes — CSS `background` accepts a comma-separated list of gradient functions, and later ones render on top of earlier ones (respecting each gradient's own transparency). This tool generates a single gradient layer; to combine multiple, take two generated outputs and join them with a comma inside one `background:` declaration.