A tailwind plugin for creating edge-fade effects using css masks.
npm install tailwindcss-fade/* globals.css */
@import "tailwindcss";
@plugin "tailwindcss-fade";// tailwind.config.ts
import FadePlugin from "tailwindcss-fade";
export default {
plugins: [FadePlugin],
};hover-effect-demo-tw.mp4
scroll-effect-demo-tw.mp4
| Utility | Description | Value type |
|---|---|---|
fade-mask |
Required base class | — |
fade-{inset} |
Fade all sides | Tailwind inset |
fade-{x|y}-{inset} |
Fade horizontal/vertical | Tailwind inset |
fade-{top|bottom|left|right}-{inset} |
Fade individual sides | Tailwind inset |
fade-intensity-{percentage} |
Fade intensity (all sides) | Tailwind opacity |
fade-{x|y}-intensity-{percentage} |
Fade intensity (axes) | Tailwind opacity |
fade-{top|bottom|left|right}-intensity-{percentage} |
Fade intensity (individual) | Tailwind opacity |
fade-rotate-{angle} |
Rotate mask | Tailwind rotate |
transition-fade |
Animate fade changes | — |
All fade utilities support arbitrary values using Tailwind's bracket notation:
<div class="fade-mask fade-bottom-[90%]">Custom percentage fade</div>
<div class="fade-mask fade-right-[120px]">Custom pixel fade</div>
<div class="fade-mask fade-x-8 fade-intensity-[0.33]">Custom opacity fade</div>
<div class="fade-mask fade-top-8 fade-top-intensity-[90%]">Intensity accepts percentages</div>
<div class="fade-mask fade-y-8 fade-rotate-[23.5deg]">Custom rotation</div>MIT