tailwindcss-fade

A tailwind plugin for creating edge-fade effects using css masks.

Installation

npm install tailwindcss-fade

Tailwind v4

/* globals.css */
@import "tailwindcss";
@plugin "tailwindcss-fade";

Tailwind v3

// tailwind.config.ts
import FadePlugin from "tailwindcss-fade";

export default {
  plugins: [FadePlugin],
};

Examples

Hover effect

View demo

https://github.com/user-attachments/assets/539c1883-5c6d-4cb4-b3c4-9df908fd2804

Scroll effect

View demo

https://github.com/user-attachments/assets/5dd69753-3ee9-4258-89de-d74a2015e9e8

API

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	—

Arbitrary Values

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>

License

MIT