How to Create CSS Gradients and Shadows

Use a CSS gradient as a background image, then control its direction, shape, and color-stop positions. Add box-shadow for depth around an element or text-shadow for depth behind glyphs. These effects are generated by CSS, so simple color transitions do not need a separate raster image.

1. Choose the right gradient

CSS gradients are image values. You can use them anywhere CSS accepts an image, including background and background-image.

Effect	Function	Use it for
Straight transition	`linear-gradient()`	Buttons, banners, overlays, and color bands
Transition from a center	`radial-gradient()`	Highlights, glows, and circular effects
Transition around a center	`conic-gradient()`	Color wheels, wedges, and circular charts
Repeated pattern	`repeating-linear-gradient()`, `repeating-radial-gradient()`, or `repeating-conic-gradient()`	Stripes, rings, and repeated wedges

Linear gradients: direction and stops

A linear gradient runs from top to bottom by default. Specify a direction such as to right, or an angle such as 70deg. Color stops determine where each color appears along the transition.

.banner {
  background: linear-gradient(to right, #3157d5, #8b5cf6, #f4a261);
}

.diagonal {
  background: linear-gradient(70deg, #172554 0%, #2563eb 55%, #a78bfa 100%);
}

Stop positions are optional. If omitted, the browser spaces colors across the gradient. Add positions to control the transition, such as 0%, 55%, and 100%. Stops placed close together create a sharper boundary; matching positions can make a hard band.

Radial gradients: shape, size, and center

A radial gradient expands from a center point. You can set its shape, size, and position. For example, circle at top left places a circular highlight at the upper-left corner.

.card {
  background: radial-gradient(circle at top left, #fff 0%, #dbeafe 55%, #bfdbfe 100%);
}

.glow {
  background: radial-gradient(ellipse at 50% 20%, rgb(255 255 255 / 90%), transparent 65%);
}

Conic and repeating gradients

A conic gradient sweeps around its center. Repeating gradients repeat the pattern defined by their stops. Set stop positions intentionally so the repeat interval is clear.

.wheel {
  background: conic-gradient(from 0deg, #ef4444, #facc15, #22c55e, #3b82f6, #ef4444);
}

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #e0e7ff 0 10px,
    #4f46e5 10px 20px
  );
}

2. Add a box shadow

box-shadow draws a shadow around an element’s box. Its common value order is horizontal offset, vertical offset, optional blur radius, optional spread radius, and color. Positive horizontal offset moves the shadow right; positive vertical offset moves it down. Blur softens it, while spread grows or shrinks its size. The inset keyword makes the shadow appear inside the box.

.panel {
  box-shadow: 0 8px 20px 0 rgb(0 0 0 / 18%);
}

.panel-highlight {
  box-shadow:
    0 8px 20px rgb(0 0 0 / 18%),
    inset 0 1px rgb(255 255 255 / 60%);
}

.pressed {
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 20%);
}

Multiple shadows are comma-separated. The first listed shadow is painted above later shadows. Use a transparent shadow color to tune the effect without making it look like a solid outline.

3. Add a text shadow

text-shadow applies a shadow to text. It requires horizontal and vertical offsets, followed optionally by blur and color. Specify a color for a predictable result.

.heading {
  text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}

.layered-heading {
  text-shadow:
    0 1px 1px rgb(0 0 0 / 35%),
    0 4px 12px rgb(0 0 0 / 20%);
}

Text shadows also accept comma-separated layers. The first shadow listed is on top. Keep the effect subtle enough that letter shapes remain easy to read.

4. Complete runnable example

Save this as index.html and open it in a browser. It combines a gradient background, radial highlight, box shadow, inset highlight, and text shadow.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Gradients and Shadows</title>
  <style>
    * { box-sizing: border-box; }

    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 2rem;
      font: 1rem/1.5 system-ui, sans-serif;
      background: linear-gradient(135deg, #eff6ff, #f5f3ff 55%, #fff7ed);
      color: #172033;
    }

    .card {
      width: min(100%, 34rem);
      padding: 2rem;
      border: 1px solid rgb(255 255 255 / 70%);
      border-radius: 1.25rem;
      background:
        radial-gradient(circle at top left, rgb(255 255 255 / 95%), transparent 55%),
        linear-gradient(135deg, #dbeafe, #ede9fe 58%, #ffedd5);
      box-shadow:
        0 18px 45px rgb(30 41 59 / 18%),
        inset 0 1px rgb(255 255 255 / 80%);
    }

    h1 {
      margin: 0 0 0.75rem;
      color: #312e81;
      text-shadow: 0 2px 8px rgb(49 46 129 / 18%);
    }

    p { margin: 0; }
  </style>
</head>
<body>
  <main class="card">
    <h1>Soft color, clear depth</h1>
    <p>Gradients create the color transitions. Layered shadows give the card and heading depth.</p>
  </main>
</body>
</html>

5. Tune the effect without guesswork

Start with two colors and a simple direction or center.
Add color stops only when you need tighter control over where a transition happens.
For a box shadow, adjust offset first, then blur, then spread. Keep the color translucent when you want a softer shadow.
For text, use small offsets and modest blur so the shadow does not obscure the glyphs.
Layer effects with commas, and check the first layer because it sits above subsequent layers.

Desired change	Adjust
Move the gradient transition	Linear direction or angle; radial/conic center and starting angle
Move a color boundary	Color-stop position
Make a shadow travel farther	Horizontal or vertical offset
Make a shadow softer	Blur radius
Make the shadow cover more or less area	Spread radius for `box-shadow`
Put the shadow inside the box	Add `inset` to `box-shadow`

6. Common problems and fixes

Symptom	Likely cause	Fix
No gradient appears	The declaration is invalid, or another background declaration overrides it.	Check commas and parentheses, then inspect the winning `background` rule. Put layered backgrounds in one declaration when appropriate.
The gradient goes the wrong way	Linear gradients default to top-to-bottom, or the chosen angle points differently than expected.	Use an explicit direction such as `to right`, or adjust the angle.
A color seems to vanish or dominate	Stops are missing, out of sequence, or placed too close together.	Set explicit stop positions and spread them across the gradient.
A repeating pattern looks solid	The repeated stop interval is too small for the rendered size.	Increase the distance between stops and inspect at the final element dimensions.
Shadow looks like a hard outline	Blur is zero or very small, spread is large, or the color is too opaque.	Reduce spread, add blur, and use a translucent color.
Inset shadow is outside	`inset` is missing or placed in a different shadow layer than intended.	Add `inset` within the specific comma-separated `box-shadow` layer.
Text becomes hard to read	The text shadow is too strong or offset too far.	Reduce opacity, blur, and offset; confirm contrast against the underlying background.

7. Performance, reliability, and compatibility

Gradients are generated by the browser, so a CSS color transition does not require downloading a raster image. Complex layered backgrounds and many large blurred shadows still add rendering work; use only the layers the design needs, especially on large surfaces or repeated components. Prefer a simple gradient and restrained shadow for interface elements that appear many times.

These CSS properties are established features, but compatibility can vary for newer syntax details. If supporting older browser versions matters, check the specific function and syntax against the browser versions your project supports. The references below describe the relevant specifications; a specification alone does not guarantee every implementation detail behaves identically in every browser.

8. Or skip the browser setup

If you need a screenshot of the finished page to review or share, ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a URL as PNG, JPEG, WebP, or PDF. Here is the one-call API example; see the ScreenshotNeo API docs for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', new Uint8Array(await res.arrayBuffer()));

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers say the page verdict and billing status. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.

9. FAQ

Can a gradient be used anywhere an image can?

Yes. A gradient is a CSS image value, so it can be used in image-accepting properties such as background-image.

What is the difference between a box shadow and a text shadow?

box-shadow applies around an element’s box and supports spread and inset shadows. text-shadow applies to text glyphs and has no spread or inset parameter.

Do I need an image file for a CSS gradient?

No. The browser generates the gradient from the CSS declaration. Use an image file when the design calls for image content or texture rather than a color transition.