Box Shadow
Utilities for controlling the width and color of inset ring shadows.
| Class | CSS Output |
|---|---|
inset-ring |
|
inset-ring-2 |
|
inset-ring-4 |
|
inset-ring-red-500 |
|
inset-ring-blue-600 |
|
inset-ring-red-500/50 |
|
inset-ring-[3px] |
|
ring |
|
ring-2 |
|
ring-4 |
|
ring-red-500 |
|
ring-blue-600 |
|
ring-red-500/50 |
|
ring-[3px] |
|
ring-[#ff0000] |
|
inset-ring
--tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
inset-ring-2
--tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
inset-ring-4
--tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
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, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
ring
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
ring-2
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
ring-4
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
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, 0px)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow, 0 0 transparent), var(--tw-inset-ring-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent);
ring-[#ff0000]
--tw-ring-color: #ff0000;
Reference
| box-shadow | MDN ↗ |
CSS Properties
box-shadow