Shadows and filters in CSS

Depth and image effects: box shadows, text shadows, filters, blend modes.

.card {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 20%),
    0 8px 24px rgb(0 0 0 / 25%);
}

.overlay {
  backdrop-filter: blur(10px) saturate(120%);
}

.logo {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
}

.dim {
  filter: grayscale(1) brightness(0.8);
}

How it works

1. Layering two soft shadows reads more naturally than one hard one.
2. filter: blur affects the element, backdrop-filter what is behind.
3. drop-shadow follows an alpha shape, unlike box-shadow.

Keywords and builtins used here

• blur
• brightness
• card
• dim
• filter
• grayscale
• logo
• overlay
• px
• rgb
• saturate

The run, in numbers

Lines

17

Characters to type

244

Tokens

92

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 61 seconds.

Type this snippet

Step 8 of 8 in Motion & effects, step 18 of 21 in Responsive & modern CSS.

← Previous Next →