Shadows, rings, and depth

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Shadows, rings, and depth—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Shadows, rings, and depth in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Shadows, rings, and depth in your own words.

Depth cues come from shadow-sm through shadow-2xl and from ring-* utilities that draw focus-friendly outlines without fighting border radius.

Shadow vs ring

Shadow — elevation and card separation (shadow-md)
Ring — faux outline using box-shadow; great for focus and selected states (ring-2 ring-indigo-500)

Rings follow border radius; use ring-offset-2 when you need a gap between ring and control edge—common on buttons.

Self-check

When would you pick ring over border-2?
What does shadow-none help you reset?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

When is ring better than border for focus?
Which shadow level fits cards vs modals in your UI?

No discussion yet. Be the first to ask a question.