build linear and radial CSS gradients visually. adjust angle, add color stops, pick from presets — copy the CSS with one click.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Build a CSS gradient visually — pick the type, the angle (or center point, for radials), the color stops, and copy the generated CSS. Live preview as you adjust. The output is plain CSS you can drop into any stylesheet without modification.
Linear — a smooth transition along a straight line. The default direction is top-to-bottom, but you can set any angle from 0deg (bottom-to-top) clockwise through 360deg. The most common gradient by far; covers about 80% of real-world uses.
Radial — a transition radiating outward from a center point. Useful for spotlight effects, button glows, and any case where the visual emphasis should be at a specific point. The center can be anywhere, including outside the visible box.
Conic — a transition that sweeps around a center point like the hands of a clock. Used for pie charts, color wheels, loading spinners, and decorative backgrounds. Newer than the other two; supported in every current browser.
A gradient is defined by two or more color stops — a color paired with a position along the gradient axis. The browser interpolates between consecutive stops to fill in every position in between.
background: linear-gradient(
90deg,
#f59e0b 0%,
#ef4444 50%,
#8b5cf6 100%
);Three colors, three positions. The browser computes a smooth transition from amber to red across the first half, and from red to purple across the second half. You can omit the positions; CSS will distribute the stops evenly. You can also stack stops at the same position to create a hard line rather than a smooth fade.
When the browser fills in the colors between two stops, it does so by interpolating in sRGB space — the same color space the colors are written in. For most pairs of colors, that produces a clean gradient. For some pairs, the midpoint dips through a muddy grey or brown that does not feel like a natural transition.
Classic example: blue to yellow in sRGB goes through a dingy olive grey at the midpoint. The eye expects to see green somewhere in the middle, because that is where the spectrum actually is between blue and yellow.
Modern CSS lets you specify the interpolation color space, which fixes this:
background: linear-gradient(
in oklch,
blue, yellow
);Interpolating in OKLCH (or LCH, or HSL with longer hue) goes through the colors a human eye expects between the endpoints. Vivid greens for blue-to-yellow. Smooth saturated oranges for red-to-yellow. The change is subtle but consistent.
When to bother with custom interpolation
in oklch for cleaner results.Gradients are not free. Every gradient is rasterized by the browser at the size of the element. Large backgrounds (full-page gradients, hero sections) can cost real frame time on lower-end devices, especially when the element is also being animated. If you see frame drops on a page with a complex gradient, that is often the cause.
Banding. Gradients between similar colors can show visible banding — discrete steps where the transition should be smooth — on 8-bit displays. Common offenders: dark-grey-to-slightly-darker-grey backgrounds. The fix is either to add a tiny noise texture overlay or to use a slightly larger color difference between stops.
Browser gradient direction differences. The CSS spec defines 0deg as “bottom to top” for linear gradients. This was changed in 2014 — older code may have used the inverted convention. If you are porting a gradient from a 2010-era stylesheet, check the angle.
Gradient backgrounds with text on top can fail contrast checking at one end of the gradient and pass at the other. Test against both endpoints, or pick a gradient where both ends are dark enough (or both light enough) for your text color. The contrast checker handles the per-end comparison.
For pages where the text needs to stay readable across a complex gradient background, the cleanest solution is a semi-transparent overlay between the gradient and the text: a dark gradient overlay below light text, or a light overlay below dark text.
For picking the gradient stops in the first place, see the color picker. For verifying readability of text on top, see the contrast checker. For building shadow effects to layer alongside gradients, see the box shadow generator.
Build a CSS gradient visually — pick the type, the angle (or center point, for radials), the color stops, and copy the generated CSS. Live preview as you adjust. The output is plain CSS you can drop into any stylesheet without modification.
Linear — a smooth transition along a straight line. The default direction is top-to-bottom, but you can set any angle from 0deg (bottom-to-top) clockwise through 360deg. The most common gradient by far; covers about 80% of real-world uses.
Radial — a transition radiating outward from a center point. Useful for spotlight effects, button glows, and any case where the visual emphasis should be at a specific point. The center can be anywhere, including outside the visible box.
Conic — a transition that sweeps around a center point like the hands of a clock. Used for pie charts, color wheels, loading spinners, and decorative backgrounds. Newer than the other two; supported in every current browser.
A gradient is defined by two or more color stops — a color paired with a position along the gradient axis. The browser interpolates between consecutive stops to fill in every position in between.
background: linear-gradient(
90deg,
#f59e0b 0%,
#ef4444 50%,
#8b5cf6 100%
);Three colors, three positions. The browser computes a smooth transition from amber to red across the first half, and from red to purple across the second half. You can omit the positions; CSS will distribute the stops evenly. You can also stack stops at the same position to create a hard line rather than a smooth fade.
When the browser fills in the colors between two stops, it does so by interpolating in sRGB space — the same color space the colors are written in. For most pairs of colors, that produces a clean gradient. For some pairs, the midpoint dips through a muddy grey or brown that does not feel like a natural transition.
Classic example: blue to yellow in sRGB goes through a dingy olive grey at the midpoint. The eye expects to see green somewhere in the middle, because that is where the spectrum actually is between blue and yellow.
Modern CSS lets you specify the interpolation color space, which fixes this:
background: linear-gradient(
in oklch,
blue, yellow
);Interpolating in OKLCH (or LCH, or HSL with longer hue) goes through the colors a human eye expects between the endpoints. Vivid greens for blue-to-yellow. Smooth saturated oranges for red-to-yellow. The change is subtle but consistent.
When to bother with custom interpolation
in oklch for cleaner results.Gradients are not free. Every gradient is rasterized by the browser at the size of the element. Large backgrounds (full-page gradients, hero sections) can cost real frame time on lower-end devices, especially when the element is also being animated. If you see frame drops on a page with a complex gradient, that is often the cause.
Banding. Gradients between similar colors can show visible banding — discrete steps where the transition should be smooth — on 8-bit displays. Common offenders: dark-grey-to-slightly-darker-grey backgrounds. The fix is either to add a tiny noise texture overlay or to use a slightly larger color difference between stops.
Browser gradient direction differences. The CSS spec defines 0deg as “bottom to top” for linear gradients. This was changed in 2014 — older code may have used the inverted convention. If you are porting a gradient from a 2010-era stylesheet, check the angle.
Gradient backgrounds with text on top can fail contrast checking at one end of the gradient and pass at the other. Test against both endpoints, or pick a gradient where both ends are dark enough (or both light enough) for your text color. The contrast checker handles the per-end comparison.
For pages where the text needs to stay readable across a complex gradient background, the cleanest solution is a semi-transparent overlay between the gradient and the text: a dark gradient overlay below light text, or a light overlay below dark text.
For picking the gradient stops in the first place, see the color picker. For verifying readability of text on top, see the contrast checker. For building shadow effects to layer alongside gradients, see the box shadow generator.
PDF utilities, image tools, developer helpers — all free, no signup.
Generate v4 UUIDs instantly.
Build CSS box shadows visually with live preview.
Generate a robots.
Generate placeholder images with custom dimensions, colors, and text.
Drop a screenshot and frame it in a device mockup — iPhone, MacBook, iPad, Browser, or Android.
Convert text to binary, hexadecimal, and decimal byte values in real time.