PluginStatstailwindcss-fade weekly downloads statistics
By malerba118 · npm · Tailwind plugins
Mask-powered fade utils for tailwind.
tailwindcss-fade has 814 recorded weekly downloads on npm, a decrease of 67.5% over the past 30 days, ranking #1476 of 2,322 tracked listings.
About tailwindcss-fade
tailwindcss-fade
A tailwind plugin for creating edge-fade effects using css masks.
<img width="1507" height="576" alt="Screenshot 2025-10-31 at 3 48 43 PM" src="https://github.com/user-attachments/assets/9950c7f6-e2cc-49c7-8a79-a7645cb98ef9" />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
https://github.com/user-attachments/assets/539c1883-5c6d-4cb4-b3c4-9df908fd2804
Scroll effect
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
Description from the npm listing.
- tailwindcss
- tailwind
- tailwindcss-plugin
- fade
- mask
- css-mask
- gradient
- fade-effect
- scroll-fade
- edge-fade
- utilities
README badge
Show your rank in a README or on your website. The badge updates automatically.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Ranking history
Listing placement
Listing placement
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Each band is one page of 20. Weekly downloads on a linear scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Recent observations
Full history (544)Similar npm Tailwind plugins plugins
All 20 tailwindcss-fade alternativesData source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/tailwindcss-fade. First seen Oct 16, 2026; last successful collection Oct 20, 2026. See the methodology.