Box Shadow

Utilities for controlling the width and color of inset ring shadows.

Class CSS Output
inset-ring
--tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
inset-ring-2
--tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
inset-ring-4
--tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
inset-ring-red-500
--tw-inset-ring-color: var(--color-red-500);
inset-ring-blue-600
--tw-inset-ring-color: var(--color-blue-600);
inset-ring-red-500/50
--tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
inset-ring-[3px]
--tw-inset-ring-shadow: inset 0 0 0 3px var(--tw-inset-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
ring
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
ring-2
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
ring-4
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
ring-red-500
--tw-ring-color: var(--color-red-500);
ring-blue-600
--tw-ring-color: var(--color-blue-600);
ring-red-500/50
--tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
ring-[3px]
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
ring-[#ff0000]
--tw-ring-color: #ff0000;