Design beautiful CSS gradients with a live preview. Build linear-gradient, radial-gradient, conic-gradient, and multi-layer mesh gradients — then copy production-ready CSS, Tailwind, or SCSS in one click. 32 hand-picked presets, OKLCH support, no signup.
background-color: #07051a;
background-image: radial-gradient(at 18% 22%, #f472b6 0px, transparent 55%), radial-gradient(at 82% 30%, #8b5cf6 0px, transparent 60%), radial-gradient(at 50% 85%, #06b6d4 0px, transparent 55%);Linear
Transitions along a straight line. Best for backgrounds, buttons, and hero sections.
Radial
Radiates outward from a center point. Perfect for spotlights and glows.
Conic
Sweeps around a center point. Ideal for pie charts and progress rings.
Mesh
Layered radial gradients creating soft, atmospheric blends.
Copy current CSS
Randomize gradient
Switch to Linear
Switch to Radial
Switch to Conic
Switch to Mesh
A linear-gradient transitions colors along a straight line. The angle (in deg, rad, or turn) defines the direction. 135deg is a diagonal from the top-left to bottom-right.
background: linear-gradient(
135deg,
#6366f1 0%,
#ec4899 100%
);A radial-gradient spreads colors outward from a point. You can control the shape (circle or ellipse), size, and center position — ideal for spotlights and glows.
background: radial-gradient(
125% 125% at 50% 10%,
#000 40%,
#ff006f 100%
);A conic-gradient sweeps colors around a center point like a pie chart. Use from <angle> to set the starting rotation and at <position> to set the center.
background: conic-gradient(
from 90deg at 50% 50%,
#e2cbff 0%,
#393bb2 50%,
#e2cbff 100%
);A mesh gradient is built by layering multiple radial-gradient() values on background-image, sitting on a solid base color. Each layer covers a different area; where they overlap, colors blend softly.
background-color: #07051a;
background-image:
radial-gradient(at 18% 22%, #f472b6 0, transparent 55%),
radial-gradient(at 82% 30%, #8b5cf6 0, transparent 60%),
radial-gradient(at 50% 85%, #06b6d4 0, transparent 55%); Any valid CSS color works inside a gradient — hex (#ec4899), rgba(), hsl(), and the modern oklch() format. OKLCH is recommended for wide-gamut, perceptually uniform gradients — lightness steps look visually even, unlike HSL which can band.
/* OKLCH gradient — perceptually uniform */
background: linear-gradient(
135deg,
oklch(70% 0.18 280),
oklch(65% 0.22 340)
);
/* rgba gradient — with transparency */
background: linear-gradient(
to bottom,
rgba(0, 122, 255, 0.9),
rgba(88, 86, 214, 0.4)
); Tailwind ships with built-in utilities for linear gradients (bg-linear-to-br from-indigo-500 to-pink-500). For radial, conic, or mesh gradients, use arbitrary value syntax — switch the Export panel above to Tailwind to copy it directly.
<!-- Built-in linear gradient -->
<div class="bg-linear-to-br from-indigo-500 to-pink-500"></div>
<!-- Arbitrary value for radial/conic/mesh -->
<div class="bg-[radial-gradient(125%_125%_at_50%_10%,#000_40%,#ff006f_100%)]"></div>A CSS gradient generator is a visual tool that helps you create gradient backgrounds without writing code manually. You pick colors, set directions and stop positions on a live preview, and the tool outputs the CSS background property you can paste into your stylesheet.
This generator creates all four CSS gradient functions: linear-gradient (straight-line transitions), radial-gradient (circular or elliptical from a center point), conic-gradient (sweeps around a center point like a pie chart), and mesh gradients (multiple radial gradients layered on a base color for a soft, painterly effect).
Yes. linear-gradient(), radial-gradient(), and conic-gradient() are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Conic gradients require Safari 12.1+ and Chrome 69+. Mesh gradients rely on stacked radial-gradient layers, which work everywhere. No vendor prefixes are needed for modern browsers.
A mesh gradient is built by layering multiple radial-gradient() values on the background-image property, on top of a solid background-color. Each layer covers a different area of the element, and where they overlap they blend to create soft, painterly transitions. Switch this generator to the Mesh tab and drag the color handles to compose one visually.
Yes. The Export panel lets you switch between raw CSS, Tailwind arbitrary value syntax (e.g. bg-[linear-gradient(...)]), and SCSS variable syntax. Copy any format with a single click.
Yes — any valid CSS color works inside a gradient, including hex (#ec4899), rgb(), hsl(), and the modern oklch() format. OKLCH is recommended for wide-gamut, perceptually uniform gradients because lightness steps look visually even.
The angle in a linear-gradient defines the direction of the color transition. 0deg goes bottom-to-top, 90deg goes left-to-right, 135deg is a diagonal from top-left to bottom-right, and 180deg goes top-to-bottom. Use the angle dial on this page to set it visually.
Gradients are images so they can't transition directly between color values. The common technique is to apply a very large background-size (e.g. 300% 300%) and animate the background-position with @keyframes, which creates a smooth moving-gradient effect. Define your gradient once, then animate position over several seconds.
Yes, CSS supports layering multiple gradients on a single element by comma-separating them in the background-image property. This is commonly used for mesh gradients, glassmorphism, and complex atmospheric effects. The first layer in the list sits on top.
The MiroMiro Chrome extension detects and extracts CSS gradients from any live website — including all color stops, angles, and layered backgrounds. Hover over any element to see its gradient code, then copy it directly into your project.