Radial
<figure class="bg-gradient-radial from-tertiary-500 via-secondary-500 to-primary-500 aspect-square size-48 rounded-full"></figure>
Conic
<figure class="bg-gradient-conic from-success-500 via-warning-500 to-error-500 aspect-square size-48 rounded-full"></figure>
Spinner
<figure class="bg-gradient-conic to-primary-500 aspect-square size-10 animate-spin rounded-full from-transparent"></figure>
Text
<h1 class="type-scale-9 font-bold uppercase">
<span class="bg-gradient-radial from-tertiary-500 to-primary-500 box-decoration-clone bg-clip-text text-transparent"> Skeleton </span>
Supported Utilities
Both radial and conic variations support Tailwind’s linear gradient options, including Color Stops and Stop Positions.
NextJS Users
Feel free to remove gradient-radial
and gradient-conic
from your local Tailwind config, these are redudant with Skeleton.