Beautiful, mathematically precise shadows as Tailwind utilities.
Just add the plugin and use
shadow-effective-{1-7}
or
drop-shadow-effective-{1-7}
Perfect for non-rectangular elements like icons, badges, or clipped shapes.
Cards with shadow-effective-4
that transitions to shadow-effective-6 on hover.
Badges with subtle drop-shadow-effective-1
for that extra pop.
1. Install the package
npm install @effective/shadow
2. Add to tailwind.config.js
import effectiveShadow from "@effective/shadow/tailwind"
export default {
plugins: [effectiveShadow]
}3. Use the classes
<div class="shadow-effective-4">...</div>