Shadows and gradients

Shadows give an interface depth: a card seems lifted above the page, a button above the background. A gradient — a smooth transition between colors — replaces background pictures. The browser draws both by itself, without image files.

A block shadow

box-shadow takes a horizontal offset, a vertical offset, a blur and a color:

<style>
  .card { width: 200px; padding: 16px; margin: 8px; background: white; box-shadow: 4px 6px 12px gray; }
</style>
 
<div class="card">The shadow is shifted right and down</div>

A soft shadow comes from a small offset, a strong blur and a semi-transparent color: 0 4px 16px rgb(0 0 0 / 0.15).

Shadow parameters

Part	Example	Meaning
Offset X	`4px`	To the right; negative — to the left
Offset Y	`6px`	Down; negative — up
Blur	`12px`	The bigger, the softer the edge
Spread	`2px`	Enlarges the shadow on all sides, optional
`inset`	`inset 0 2px 4px gray`	A shadow inside the block

Several shadows are listed with commas:

<style>
  .box { display: inline-block; padding: 16px; margin: 12px; background: white; }
  .soft { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.15); }
  .inner { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.3); }
</style>
 
<div class="box soft">Two shadows</div>
<div class="box inner">Inner</div>

A text shadow

text-shadow works the same way, but without spread and inset:

<style>
  .title { font-size: 32px; font-weight: bold; color: white; background: steelblue; padding: 8px; text-shadow: 2px 2px 4px black; }
</style>
 
<p class="title">A heading with a shadow</p>

A linear gradient

A gradient is a background image, so it is written in background. linear-gradient() goes from color to color along a straight line. The direction can come first: to right or an angle in degrees:

<style>
  .g { height: 50px; margin-bottom: 8px; }
  .down { background: linear-gradient(gold, tomato); }
  .right { background: linear-gradient(to right, lightskyblue, mediumpurple); }
  .angle { background: linear-gradient(45deg, seagreen, gold); }
</style>
 
<div class="g down"></div>
<div class="g right"></div>
<div class="g angle"></div>

Without a direction the gradient goes from top to bottom.

Color stops and a radial gradient

After a color you can say where it stands: gold 30%. Two colors at the same point give a sharp border instead of a smooth one. radial-gradient() spreads in circles from the center:

<style>
  .g { display: inline-block; width: 140px; height: 90px; margin: 4px; }
  .stops { background: linear-gradient(to right, crimson 50%, gold 50%); }
  .radial { background: radial-gradient(circle, white, steelblue); }
</style>
 
<div class="g stops"></div>
<div class="g radial"></div>

Common mistake

A gradient is not a color but an image. It does not work in background-color, and the browser silently throws the rule away:

<style>
  .box { height: 50px; margin-bottom: 8px; border: 1px solid gray; }
  .bad { background-color: linear-gradient(gold, tomato); }
  .good { background-image: linear-gradient(gold, tomato); }
</style>
 
<div class="box bad"></div>
<div class="box good"></div>

Write a gradient in background or background-image.

Thanks for reading!