Small
Tailwind's shadow-sm.
shadow-sm Plain Tailwind
Squircle pill
Compare pill shadows
Same size, fill and shadow. The left button uses plain Tailwind with rounded-full.
The right uses squircle-pill. The plain button has no squircle classes or attributes.
Squircle drawn by …
Try your shadow
Both buttons use shadow-(--button-shadow). Edit the value to update both.
Plain Tailwind
Squircle pill
Show the classes
h-12 w-16 bg-teal-600 px-2 py-2 text-sm font-semibold text-white min-[360px]:w-24 sm:w-40 sm:px-4 rounded-full shadow-(--button-shadow) h-12 w-16 bg-teal-600 px-2 py-2 text-sm font-semibold text-white min-[360px]:w-24 sm:w-40 sm:px-4 squircle-pill shadow-(--button-shadow) Compare utilities
Large
Tailwind's shadow-xl.
shadow-xl Plain Tailwind
Squircle pill
Negative offset
A literal shadow with negative offset and spread.
shadow-[-8px_5px_12px_-2px_rgb(0_0_0/0.5)] Plain Tailwind
Squircle pill
Hover and focus
Hover this row or focus either button to lift both.
shadow-sm group-hover:shadow-xl group-focus-within:shadow-xl Plain Tailwind
Squircle pill