Create Next App

Tailwind CSS – Fade

A plugin that provides a composable API for adding a fade effect to the elements.

Fade direction

FromTo

Fade smooth

Jonathan EdwardsCTO at Blue Horizon

Must say, product @fadeaway is a game-changer! Solved critical issues we've been grappling with for a while. Kudos to the team behind! #ProductRevolution

Tommy HamiltonProject Manager at BlueOcean

I'm floored how much value to our work @fadeaway delivers. The 'wow' moment was immediate. #HighlyRecommended product.

William MartinezProduct Designer at Cybernetic

The interface of @fadeaway has won our team over. So intuitive and user-friendly. Makes work much more efficient.

Thomas BakerExecutive Director at Pinnacle

Absolutely blown away by the thoughtful design of @fadeaway. Never thought a product could bring such a huge shift in our daily operations.

Li WeiTech Lead at Future First

'Killer app' doesn't do justice to @fadeaway. This innovative product is reshaping our entire workflow. The team behind truly 'gets it'. #VisionaryProduct

Sophia LeeSenior Analyst at DataDig

Can't imagine my work life without @fadeaway anymore. It turned the tide for us in solving major challenges. Must-have for any team.

Setup

Install and Setup

Install the plugin from npm:

Then add the plugin to your tailwind.config.js file:

Basic Usage

Direction

Start by adding a `fade-{direction}` utility to the container to create a fade effect on one or both sides.

fade-t

fade-r

fade-b

fade-l

fade-x

fade-y

Size

Start by adding a `fade-{direction}` utility to the container to create a fade effect on one or both sides. Note, as a fade property you point the side that you want to fade away (disappear), not the one that you want to stay visible. Meaning if you want to fade the bottom, you use `fade-b`.

Smooth

Plugin uses `fade-smooth as a default smoothing option. This is a generally good default that works great in the most cases. However you might be interested in using `fade-ease-in if you want to create a safe-zone for you content while keeping most of the image relatively visible.

Fade smooth