Create stunning CSS gradients with linear/radial/conic types, angle control, position control, multiple color stops, 11 presets, and reverse/randomize features
CSS has three gradient functions and they interpolate color in different geometric patterns. linear-gradient interpolates along a line at a specified angle; radial-gradient interpolates outward from a center point to an ellipse boundary; conic-gradient interpolates around a circle starting from a specified angle. The three produce visually distinct looks even with identical color stops: the same blue-to-purple transition looks like a vertical stripe as linear, a glowing orb as radial, and a color wheel slice as conic. Each is written in CSS with different syntax, `linear-gradient(45deg, blue, purple)``radial-gradient(circle at center, blue, purple)``conic-gradient(from 0deg at 50% 50%, blue, purple)`and each exposes slightly different tuning options. The common mistake in gradient design is using only two color stops. Two-stop gradients produce the muddy middle you see on amateur web designs, because interpolating between two colors in sRGB passes through desaturated hues. Professional-looking gradients typically use 3-5 stops with intentional intermediate colors, avoiding the dead zones. This tool lets you drag stops along the gradient axis and adjust per-stop position, which is the practical way to avoid the muddy middle without thinking explicitly about color theory.
Initializing in your browser…
Design custom CSS buttons with text, background (solid/gradient), border, shadow, and hover effects controls. 12 presets including 3D, Neon, Ghost, and Pill styles
Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.
Design complex box shadows with multi-layer support, inset shadows, visibility toggle, layer reordering, opacity control, and 12 professional presets
A designer hands you a hero mock with a diagonal indigo-to-pink wash and you need the exact CSS, not an eyeballed approximation.
Picked stops
Angle 135° · #6366F1 at 0% · #EC4899 at 100%
Copy-paste CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
The 135° angle means the gradient line runs from the top-left toward the bottom-right (CSS angles are measured clockwise from "to top"). Drag a stop and the percentage and final declaration update live, so what you see in the preview is byte-for-byte the CSS you ship, including multi-stop and radial/conic variants.
CSS has three gradient functions and they interpolate color in different geometric patterns. linear-gradient interpolates along a line at a specified angle; radial-gradient interpolates outward from a center point to an ellipse boundary; conic-gradient interpolates around a circle starting from a specified angle. The three produce visually distinct looks even with identical color stops: the same blue-to-purple transition looks like a vertical stripe as linear, a glowing orb as radial, and a color wheel slice as conic. Each is written in CSS with different syntax, `linear-gradient(45deg, blue, purple)``radial-gradient(circle at center, blue, purple)``conic-gradient(from 0deg at 50% 50%, blue, purple)`and each exposes slightly different tuning options. The common mistake in gradient design is using only two color stops. Two-stop gradients produce the muddy middle you see on amateur web designs, because interpolating between two colors in sRGB passes through desaturated hues. Professional-looking gradients typically use 3-5 stops with intentional intermediate colors, avoiding the dead zones. This tool lets you drag stops along the gradient axis and adjust per-stop position, which is the practical way to avoid the muddy middle without thinking explicitly about color theory.
Design eye-catching gradient backgrounds for landing pages and hero sections.
Add subtle gradient fills to UI elements for depth without heavy imagery.
Create gradient overlays for charts and maps where color transitions represent ranges.
CSS gradients interpolate in sRGB color space by default. sRGB is how most images and displays encode color but it is not how human vision perceives color smoothly, interpolating between red (255, 0, 0) and green (0, 255, 0) in sRGB produces a muddy brown at the midpoint (128, 128, 0) rather than the yellow you might expect. Newer browsers support `color-mix()` and gradient interpolation in perceptually uniform spaces like OKLCH and OKLAB, which produce gradients that look continuously bright and saturated across their range. CSS Color Module Level 4 specifies `linear-gradient(in oklch, blue, purple)` to force OKLCH interpolation; support is good in Chrome 111+, Firefox 113+, and Safari 16.2+ but not universal.
Gradient direction syntax is where many developers hit confusion. The angle in `linear-gradient(45deg, ...)` is measured clockwise from "to top"0deg points up, 90deg points right, 180deg points down. This is opposite to mathematical convention (where 0deg typically points right) and caught people off-guard for years. The `to <direction>` syntax is usually clearer: `to bottom right` means the gradient ends at the bottom-right corner, regardless of the element's aspect ratio. For radial gradients, you can specify the ending shape (circle or ellipse), size keyword (closest-side, farthest-corner, etc.), and position of the center, each of which changes the gradient's visual character.
Conic gradients are the newest addition and the most flexible. They interpolate around a center point, which makes them the natural choice for pie charts, loading spinners, angular color wheels, and watermark-like radial patterns. The syntax `conic-gradient(from 90deg at 50% 50%, red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg)` produces a classic color wheel by placing each primary at its standard angle and closing back to red. Pair a conic gradient with `mask-image` or `clip-path` to carve out shapes that would be impossible with linear or radial gradients alone.
Linear gradients are the most common. Start there and experiment with radial or conic once you're comfortable.
Linear and radial gradients are supported in all modern browsers. Conic gradients have slightly narrower support but work in Chrome, Firefox, Safari, and Edge.
Absolutely. Add as many color stops as you need to create complex multi-color transitions.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.