Gradient backgrounds are one of the fastest ways to lift a design from plain to polished. But writing them from scratch — getting the angle, stops, and color space right — takes longer than it should. This page collects ten production-ready gradient snippets you can drop straight into your stylesheet. Each one includes the copy-paste CSS and one line on why it works. For the underlying theory of each gradient type, see CSS gradients: linear vs radial vs conic.

1. Subtle UI wash

A near-white tint that adds depth to dashboard cards and form containers without fighting the content.

background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);

Two close shades of slate at a shallow angle give just enough variation to read as a surface without introducing any obvious color.

2. Sunset

A warm multi-stop sweep from deep coral through amber to soft gold — ideal for hero sections and marketing banners.

background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9f43 100%);

Three stops instead of two let the gradient spend time in the mid-range amber before settling into gold, which avoids the muddy midpoint you get with a direct coral-to-gold transition.

3. Aurora (oklch)

Cool blues blending through teal into a deep violet — rendered in oklch to keep colors vivid all the way through.

background: linear-gradient(
    in oklch,
    oklch(70% 0.2 240) 0%,
    oklch(75% 0.18 180) 40%,
    oklch(60% 0.22 300) 100%
);

The in oklch hint tells the browser to interpolate in a perceptually uniform space, so the blues and purples stay saturated rather than washing out to gray at the midpoint. See Fix the gray dead-zone in CSS gradients for the full explanation.

4. Mesh-style

Multiple semi-transparent radial blobs stacked on one element to create the popular mesh-gradient look — no SVG, no canvas.

background:
    radial-gradient(ellipse at 20% 30%, rgba(120, 80, 255, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 15%, rgba(255, 100, 180, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 80%, rgba(50, 200, 255, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 85%, rgba(255, 200, 60, 0.35) 0%, transparent 50%),
    #0f0f1a;

Each radial layer uses a unique at x% y% position and a transparent outer stop. The layers blend additively over the dark base, and adjusting the percentage positions moves the color blobs anywhere you like.

5. Spotlight glow

A single bright radial circle at the top center, fading to a dark background — great for landing page heroes with centered headline text.

background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    rgba(99, 102, 241, 0.35) 0%,
    transparent 70%
), #0f172a;

Placing the center at 50% 0% (top edge) and using a wide flat ellipse creates the halo effect without the gradient eating too far down the page.

6. Conic accent

A rotating color sweep from violet to rose, useful as an eye-catching border or decorative background on small elements like badges and pill buttons.

background: conic-gradient(
    from 0deg at 50% 50%,
    #6366f1 0deg,
    #a855f7 120deg,
    #ec4899 240deg,
    #6366f1 360deg
);

Returning to the starting color at 360 degrees closes the sweep seamlessly with no hard seam visible on the element.

7. Dark dashboard

A deep navy-to-near-black radial gradient that gives dark UI surfaces a sense of depth and a subtle light source from the center.

background: radial-gradient(
    ellipse at 50% 50%,
    #1e2d4d 0%,
    #0d1117 100%
);

The center is lighter (navy) while the edges are almost black, mimicking an overhead light and preventing the flat look of a solid #0d1117 background.

8. Brand button

A vivid two-stop diagonal gradient for primary call-to-action buttons that need to pop without looking garish.

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

Moving from indigo to violet stays within the cool-purple family so the transition reads as a single confident brand color rather than two competing ones.

9. Repeating stripes

A subtle diagonal stripe pattern for empty-state areas, drag-and-drop zones, or decorative section dividers.

background: repeating-linear-gradient(
    45deg,
    #e2e8f0,
    #e2e8f0 6px,
    #f8fafc 6px,
    #f8fafc 14px
);

The hard stop pairs (same position, different colors) produce crisp stripe edges. Adjust the pixel values to control stripe width; keep them close in lightness for a subtle texture.

10. Vivid blend done right (oklch)

A bold pink-to-cyan gradient that stays fully saturated at the midpoint instead of collapsing into gray — the correct way to do a complementary-color gradient.

background: linear-gradient(in oklch, hotpink 0%, cyan 100%);

In standard sRGB, hotpink and cyan sit near-opposite on the hue wheel, so the midpoint desaturates. The in oklch hint routes the interpolation through a perceptual color space that keeps saturation constant. Read the full breakdown in Fix the gray dead-zone in CSS gradients.

How to customize these gradients

All ten snippets follow a small set of variables you can adjust without breaking the design:

  • Angle — change the degree value in linear-gradient(Xdeg, ...) or the position in radial-gradient(... at X% Y%) to shift the direction of light.
  • Color stops — swap hex or oklch values while keeping a similar lightness relationship between stops. Moving both colors to the same lightness tier gives subtle depth; a large lightness gap creates drama.
  • Stop positions — push a stop toward 0% or 100% to compact the gradient into a corner. Adding a third stop in the middle lets you control where one color "lives" on the element.
  • Opacity — use rgba() or an oklch alpha channel (e.g. oklch(70% 0.2 240 / 0.5)) to make a layer translucent and let a base color show through.
  • Color space — prefix any gradient with in oklch or in oklab to get richer midpoints on saturated transitions.

The fastest way to experiment with any of these is to paste the value into the CSS Gradient Generator and tweak sliders in real time — no manual editing required.

Frequently Asked Questions

How do I make a mesh gradient in CSS?

Stack several radial-gradient() layers in one background property, separated by commas, each with a semi-transparent color and a different at x% y% center. Example:

background:
    radial-gradient(ellipse at 25% 25%, rgba(120, 80, 255, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(255, 100, 180, 0.45) 0%, transparent 50%),
    #0f0f1a;

The layers blend over the opaque base color. Move the percentage coordinates to reposition the color blobs, and adjust the rgba alpha to control intensity. No extra markup is needed.

Can I use these gradients for free?

Yes — all snippets on this page are free for personal and commercial use, no attribution required. CSS gradient syntax is part of the web standard and carries no license. Copy, paste, and ship.

How do I stop gradients looking muddy?

The gray muddy midpoint appears when two saturated, complementary colors are interpolated in sRGB. Fix it by adding in oklch or in oklab right after the gradient function name:

background: linear-gradient(in oklch, hotpink, cyan);

These perceptually uniform spaces keep saturation high throughout the transition. The full explanation — including why sRGB causes the problem and browser support notes — is in Fix the gray dead-zone in CSS gradients.

What is the difference between a linear and radial gradient background?

A linear-gradient draws color along a straight line at a chosen angle, producing a flat directional wash across the element. A radial-gradient radiates outward from a center point as a circle or ellipse, which is natural for glows, spotlights, and vignettes. Both can be layered in a single background value by separating them with commas. For a deeper look at both functions plus conic-gradient, see CSS gradients: linear vs radial vs conic.