CSS Shadows & Gradients

Depth with box-shadow and colour blends with linear and radial gradients.

Lesson 47 of 49Intermediate13 min read

Shadows add depth. They make cards appear to float above the page and buttons look pressable. Gradients add colour and energy with smooth blends for backgrounds, buttons and even text. Both are drawn by the browser in pure CSS, so you don't need any image files.

Used well, these effects guide the eye: a raised card looks clickable, and a subtle gradient can separate a header from the content below. Used too heavily, they make a page look dated and busy. This lesson covers the syntax and the restraint that makes them look professional.

box-shadow syntax

CSS
box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
/*          x  y  blur colour */
  • The x and y offsets move the shadow right and down. Negative values move it left and up.
  • Blur sets how soft the edge is. 0 gives a sharp edge.
  • Spread, an optional fourth length, makes the shadow larger or smaller.
  • inset draws the shadow inside the box, which is useful for pressed buttons and input fields.
  • Separate several shadows with commas to build realistic, layered depth.

A shadow follows the element's border-radius, so rounded cards get rounded shadows automatically.

text-shadow

text-shadow works the same way but without spread. text-shadow: 2px 2px 0 #15161b; gives a retro, hard-edged shadow, and 0 0 10px cyan creates a neon glow. Use it sparingly on body text, where it usually makes reading harder, and check that the text still has enough contrast.

Linear, radial and conic gradients

Gradients are images generated by the browser, so they go in background or background-image:

FunctionLooks like
linear-gradient(90deg, red, blue)A straight blend in one direction
radial-gradient(circle, yellow, orange)A blend spreading out from a centre
conic-gradient(red, yellow, green, red)A sweep around a centre, like a colour wheel or pie chart

Add colour stops to control where colours change: linear-gradient(#17a865 0%, #17a865 50%, #4467ff 50%) gives a hard split instead of a blend. Gradients can also be layered over a photo to darken it, which keeps text on top readable.

CSS Shadows and Gradients Syntax

Shadows and gradients

.card { box-shadow: 0 4px 12px rgb(0 0 0 / 12%); }
.title { text-shadow: 1px 1px 2px #0004; }
.hero { background: linear-gradient(135deg, #17a865, #4467ff); }
.orb { background: radial-gradient(circle, #ffd23f, #f0592b); }

CSS Shadows and Gradients Summary

  • box-shadow takes x and y offsets, blur, optional spread and a colour.
  • Layer several shadows with commas for natural depth; use inset for inner shadows.
  • text-shadow adds shadows or glows to text without a spread value.
  • Gradients are background images: linear, radial or conic.
  • Colour stops control where gradient colours change.

CSS Shadows and Gradients Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Three shadow styles

.row { display: flex; gap: 20px; padding: 20px; background: #fbf7f0; }

.card {
  width: 100px;
  padding: 26px 0;
  text-align: center;
  border-radius: 14px;
  background: white;
  font: 700 16px sans-serif;
}

.soft { box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 24px rgb(0 0 0 / 12%); }
.hard { border: 2px solid #15161b; box-shadow: 5px 5px 0 #15161b; }
.glow { box-shadow: 0 0 0 3px #4467ff, 0 0 24px #4467ff; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 12Two layered shadows, a tight one and a large soft one, look natural.
  2. Line 13Zero blur gives a bold, graphic "neo-brutalist" shadow.
  3. Line 14A spread-only ring plus a blurred glow.
Example 2

Gradient backgrounds

div { margin-bottom: 10px; font: 700 16px sans-serif; color: white; }

.banner { padding: 20px; border-radius: 12px; background: linear-gradient(135deg, #17a865, #4467ff); }
.sun { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 35%, #ffd23f, #f0592b); }
.pie { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#4467ff 0 40%, #ffd23f 40% 75%, #f0592b 75%); }
.split { padding: 20px; background: linear-gradient(90deg, #15161b 50%, #7c3aed 50%); }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3A diagonal blend from green to blue.
  2. Line 4A radial gradient whose centre is moved up and left, like light hitting a ball.
  3. Line 5Conic gradient with stops = a pie chart in one line.
  4. Line 6Two stops at the same position create a sharp edge instead of a blend.
Example 3

Gradient text

.grad {
  font: 800 3rem sans-serif;
  background: linear-gradient(90deg, #f0592b, #7c3aed, #4467ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3The gradient is the background…
  2. Lines 4 to 6…clipped to the shape of the text, with the text colour made transparent so it shows through.

Common CSS Shadows and Gradients Mistakes

Using gradient as a colour

Don't
.btn { background-color: linear-gradient(red, blue); }
Do
.btn { background: linear-gradient(red, blue); }

Gradients are images, so background-color ignores them. Use background or background-image.

Heavy black shadows

Don't
.card { box-shadow: 0 0 20px black; }
Do
.card { box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }

Strong black shadows look dirty. Use transparency and a little vertical offset, like real light from above.

CSS Shadows and Gradients in Real Projects

Depth and colour in design

Modern design systems define "elevation" levels as shadows (raised cards, menus, modals). Gradients appear in hero sections, app icons, buttons and charts. Even this site's "Final CTA" and stat cards use these exact techniques.

CSS Shadows and Gradients Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Add a soft shadow that's 4px down with a 10px blur.

.card {
  : 0  10px rgb(0 0 0 / 15%);
}
Multiple choiceeasy

Which property adds a shadow to text?

Multiple choicemedium

Where can you use linear-gradient()?

Fix the bugmedium

The button should have a left-to-right gradient from #17a865 to #4467ff and a hard 4px shadow with no blur in #15161b. Fix the CSS.

.cta {
  padding: 12px 22px;
  border: 2px solid #15161b;
  color: white;
  background-color: linear-gradient(90deg, #17a865, #4467ff);
  box-shadow: 4px #15161b;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Has a linear gradient
  • Gradient uses the two colours
  • Hard 4px shadow with no blur

CSS Shadows and Gradients Quiz

3 questions to check what you learned.

  1. What does the third length in box-shadow: 2px 2px 8px black control?

    • Spread
    • Blur
    • Opacity
    • Inset

  2. How do you put a shadow inside an element?

    • box-shadow: inside …
    • inner-shadow: …
    • box-shadow: inset …
    • Negative blur

  3. Which gradient sweeps around a centre point like a pie chart?

    • linear-gradient
    • radial-gradient
    • circle-gradient
    • conic-gradient

CSS Shadows and Gradients Challenge

Design a glowing card

Style .card:

  1. A background linear-gradient from #7c3aed to #4467ff
  2. A layered box-shadow with two shadows (separated by a comma)
  3. White text with a text-shadow
.card { width: 240px; padding: 20px; border-radius: 18px; font-family: sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Gradient background with both colours
  • Two layered box-shadows
  • White text
  • A text-shadow is set

Related CSS topics

07BackgroundsBackground colours, images, cover/contain, positioning and layers.06ColorsColour names, HEX, RGB, HSL, transparency and contrast.08Borders & RadiusBorders, rounded corners, circles, pills and outlines.
Esc
↑↓ to navigateEnter to open