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 help?
File a feature request, report a bug, or ask me anything.