Rings and Shadows

Add focus rings and depth with ring and shadow utilities.

Syntaxclass="shadow-lg ring-2 ring-cyan-400"

A ring is an outline drawn with box-shadow, great for focus states: ring-2 ring-cyan-400.

Shadows add depth: shadow-sm, shadow, shadow-lg, shadow-xl.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer adds a focus ring to a custom button using ring-2 ring-indigo-500 ring-offset-2 for keyboard accessibility.
A card is given perceived elevation using shadow-md and lifts further on hover with hover:shadow-xl and a transition.
A profile picture gets a colored ring border using ring-4 ring-white over a colored background to create a border-like effect.

More examples

Focus ring on button

focus:ring-2 adds a 2px ring on keyboard focus; ring-offset-2 creates a gap between the element and the ring for clear visibility.

<button
  class="bg-indigo-600 text-white px-5 py-2 rounded
         focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
  Save Changes
</button>

Shadow depth with hover lift

shadow applies a medium drop shadow at rest; hover:shadow-xl increases it on hover, creating the impression of the card lifting up.

<div
  class="bg-white rounded-lg p-6
         shadow hover:shadow-xl
         transition-shadow duration-200"
>
  <p class="font-medium">Interactive card</p>
</div>

Avatar ring border

ring-2 ring-white adds a white outline ring around the avatar image, creating a double-ring border effect when set against a colored background.

<div class="w-16 h-16 rounded-full bg-indigo-500 p-0.5">
  <img
    src="avatar.jpg"
    alt=""
    class="w-full h-full rounded-full ring-2 ring-white"
  />
</div>

Discussion

Be the first to comment on this lesson.