Fade
CSS mask utilities for creating smooth fade effects and gradient edges on elements.
Fade utilities use CSS mask-image to create smooth fade effects and gradient edges on elements. These are perfect for creating elegant transitions at the edges of scrollable containers, image galleries, carousels, and any content that extends beyond its container. All fade utilities work perfectly with both light and dark modes.
| Class | Styles |
|---|---|
fade-x | mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%) |
fade-y | mask-image: linear-gradient(to top, transparent 0%, black 25%, black 75%, transparent 100%) |
fade-top | mask-image: linear-gradient(to bottom, transparent 0%, black 35%) |
fade-bottom | mask-image: linear-gradient(to top, transparent 0%, black 35%) |
fade-left | mask-image: linear-gradient(to right, transparent 0%, black 35%) |
fade-right | mask-image: linear-gradient(to left, transparent 0%, black 35%) |
fade-top-lg | mask-image: linear-gradient(to bottom, transparent 15%, black 100%) |
fade-bottom-lg | mask-image: linear-gradient(to top, transparent 15%, black 100%) |
fade-left-lg | mask-image: linear-gradient(to right, transparent 15%, black 100%) |
fade-right-lg | mask-image: linear-gradient(to left, transparent 15%, black 100%) |
Preview
Free
fade-x
fade-y
fade-top
fade-bottom
fade-left
fade-right
fade-top-lg
fade-bottom-lg
fade-left-lg
fade-right-lg
Need more variants?
Learn how to create more variants on your own.
Check out my free course designwithcode.dev
Need help?
File a feature request, report a bug, or ask me anything.