Ring Offset Color

Basic usage

Setting the ring offset color

Use the ring-offset-{color} utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren't actually possible in CSS.

<button className="ring-2 ring-purple-500 ring-offset-4 **ring-offset-purple-100** ...">
  Save Changes
</button>

Changing the opacity

Control the opacity of an element's ring offset color using the color opacity modifier.

<button className="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100**/50**"></button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<button className="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100**/[.55]**"></button>