KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #dsh-plugin #mcp #open-source #dsh #deepseek-harness

tailwindcss-fade

★ 161 Open GitHub ↗

Mask-powered fade utils for tailwind

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# tailwindcss-fade

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

## Installation

```bash
npm install tailwindcss-fade
```

### Tailwind v4

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

### Tailwind v3

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

export default {
  plugins: [FadePlugin],
};
```

## Examples

### Hover effect

[View demo](https://stackblitz.com/edit/stackblitz-starters-n6zxocey?file=app%2Fpage.tsx)

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

### Scroll effect

[View demo](https://stackblitz.com/edit/stackblitz-starters-f4skvjrr?file=app%2Fpage.tsx)

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:

```html
<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

tailwindcss-fade

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README