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.js
import { FadePlugin } from 'tailwindcss-fade';

export default {
    plugins: [FadePlugin],
};

Examples

Hover effect

View demo

https://github.com/user-attachments/assets/ce058ac9-4f3c-48a5-8a0d-50cce2d9e008

Scroll effect

View demo

https://github.com/user-attachments/assets/57bd6e87-88f8-4d0e-aaa1-e171afc394d6

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