Shadows · CSS · CodeMIRAI

box-shadow

HTML

<style>
  body { font-family: system-ui; background: #f6f7fb; padding: 10px; }
  .card { width: 220px; padding: 18px; background: white; border-radius: 12px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
</style>
<div class="card">A card with a soft shadow</div>

The values are an x offset, a y offset, a blur, an optional spread, and a colour:

CSS

box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
/*          x  y   blur  colour           */

Shadows look natural when they fall downwards (a positive y offset), are soft (a generous blur), and use a transparent dark colour rather than solid black.

Elevation

HTML

<style>
  body { display: flex; gap: 16px; padding: 18px; background: #f6f7fb; font: 13px system-ui; }
  .e { width: 110px; height: 80px; display: grid; place-items: center; background: white; border-radius: 10px;
       transition: box-shadow .2s, transform .2s; }
  .e1 { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  .e2 { box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
  .e3 { box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 12px 28px rgba(0, 0, 0, .16); }
  .e:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 18px 36px rgba(0, 0, 0, .20); }
</style>
<div class="e e1">low</div>
<div class="e e2">medium</div>
<div class="e e3">high, two layers</div>

Shadows separated by commas are layered. A small, sharp shadow for the edge in contact plus a large, soft one for the distance looks the most real. Hover any card to lift it.

Rings, inset and glow

HTML

<style>
  body { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px; font: 13px system-ui; }
  .box { width: 110px; height: 70px; display: grid; place-items: center; border-radius: 10px; background: #f4f2ff; }
  .ring  { box-shadow: 0 0 0 4px #5a48f5; }
  .inset { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); }
  .glow  { background: #5a48f5; color: white; box-shadow: 0 0 24px 4px rgba(90, 72, 245, .6); }
</style>
<div class="box ring">spread ring</div>
<div class="box inset">inset</div>
<div class="box glow">glow</div>

With no offset and no blur, the spread alone draws a solid ring. Unlike a border, it takes no space, which makes it a popular focus style.
inset draws the shadow inside the box, so it looks pressed in.
A coloured shadow with no offset becomes a glow.

text-shadow

HTML

<style>
  body { padding: 10px; }
  .lift { margin: 4px 0; font: 800 36px system-ui; color: #222; text-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
  .neon { display: inline-block; margin: 4px 0; padding: 10px 14px; border-radius: 10px; background: #0b0820;
          font: 800 36px system-ui; color: white; text-shadow: 0 0 6px #8577ff, 0 0 18px #5a48f5; }
</style>
<p class="lift">Lifted text</p>
<p class="neon">Neon glow</p>

text-shadow takes the same values, without the spread or inset. Use it lightly: a subtle shadow helps text on a photo, while a heavy one makes text harder to read.

Shadows for irregular shapes

box-shadow always follows the rectangle of the box, even when the picture inside has transparent areas. The drop-shadow() filter follows the visible shape instead:

HTML

<style>
  body { display: flex; gap: 40px; padding: 10px 20px; font: 13px system-ui; }
  figure { margin: 0; text-align: center; }
  svg { width: 90px; height: 90px; display: block; margin-bottom: 8px; }
  .box-shadow { box-shadow: 0 6px 10px rgba(0, 0, 0, .35); }
  .drop { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
</style>
<figure>
  <svg class="box-shadow" viewBox="0 0 100 100"><polygon points="50,5 61,38 95,38 67,59 78,92 50,72 22,92 33,59 5,38 39,38" fill="#f5b400"/></svg>
  box-shadow
</figure>
<figure>
  <svg class="drop" viewBox="0 0 100 100"><polygon points="50,5 61,38 95,38 67,59 78,92 50,72 22,92 33,59 5,38 39,38" fill="#f5b400"/></svg>
  drop-shadow
</figure>

Use it for icons, logos and PNG images with transparent backgrounds.