Tailwind CSS Mask Effect Components

Dev Design Library indexes 33 Tailwind CSS mask effect components from 12 open-source UI libraries, with the most coming from Pixel Perfect, Aceternity UI, Cult UI, Spectrum UI and Magic UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Mask effect components belong to the Effects group.

• Video TextMagic UI · ReactA component that displays text with a video playing in the background.
• Distorted GlassCult UI · ReactA glass morphism effect component using SVG filters with fractal noise to create visual transitions between sections
• Fluid Ink MorphSpectrum UI · Reactcomponent for the Fluid Ink Morph
• Masked AvatarsVengeance UI · ReactStacked masked avatar list
• Aperture Mask RevealPixel Perfect · ReactA camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an…
• Progressive Blurcnblocks · SvelteProgressive layered blur overlay component
• Video TextAnimations (Svelte) · SvelteA component that displays video content masked by text, creating a text-shaped video effect with customizable…
• Frosted Glass RevealGreatUI · React
• Lens RevealUI Lab · ReactA lens follows your cursor and shows the specs hidden under a card.
• Image MaskingCojeev UI · ReactCaller images are framed by original Cojeev silhouettes using CSS masks or SVG clip paths.
• Text Hover EffectVelora UI · ReactGiant outlined word that draws in, then glows in brand colours under the pointer.
• Canvas TextAceternity UI · React
• Text GifCult UI · ReactText component with GIF-like animation effects and customizable styling
• Blinds Mask RevealPixel Perfect · ReactA venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then…
• Svg Mask EffectAceternity UI · React
• Brush Mask RevealPixel Perfect · ReactA brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask…
• Text Hover EffectAceternity UI · React
• Clock Mask RevealPixel Perfect · ReactA radial clock-sweep mask reveal — a conic-gradient CSS mask sweeps a wedge around the center like a clock hand…
• Text Reveal CardAceternity UI · React
• Directional Mask RevealPixel Perfect · ReactA directional mask reveal — the image wipes in from a chosen edge (top, bottom, left, or right) via an animated…
• Ink Blob Mask RevealPixel Perfect · ReactAn ink-blob mask reveal — a drop splats in the middle, then spreads outward as an organic wobbling blob clip-path…
• Iris Mask RevealPixel Perfect · ReactA camera-iris mask reveal — a circular clip-path opens from wherever you click and expands until it reaches the…
• Keyhole Mask RevealPixel Perfect · ReactA keyhole mask reveal — a keyhole clip-path pops in with a slight tilt, then the view zooms through it until the image…
• Mosaic Mask RevealPixel Perfect · ReactA mosaic mask reveal — the image is rebuilt from a grid of square tiles that pop in with a staggered order (from the…
• Noise Mask RevealPixel Perfect · ReactA fragment-shader noise mask reveal — the image dissolves in through a drifting cloud of fbm noise, with a warm grainy…
• Pinwheel Mask RevealPixel Perfect · ReactA pinwheel mask reveal — N wedges sweep open around the center like a windmill (or a camera shutter), cut from an…
• Rect Mask RevealPixel Perfect · ReactA rectangular mask reveal — the image stays fixed while a clip-path inset rectangle grows from the center, keeping the…
• Sonar Mask RevealPixel Perfect · ReactA sonar mask reveal — concentric rings cut from a repeating-radial-gradient CSS mask thicken outward from the center…
• Spotlight Mask RevealPixel Perfect · ReactA spotlight mask reveal — the image stays dark except for a soft circle that follows your cursor like a flashlight…
• Star Mask RevealPixel Perfect · ReactA star-shaped mask reveal — a sparkle clip-path spins 360° once while scaling up from nothing to uncover the full image.
• Text Clip Mask RevealPixel Perfect · ReactA scroll-driven text-clip mask reveal — a video is clipped to the shape of a word, and as you scroll the text-shaped…
• Text Zoom Mask RevealPixel Perfect · ReactA text-zoom mask reveal — the image shows through the giant word "PIXEL", which then dives through the X until the…
• Wave Mask RevealPixel Perfect · ReactA liquid-wave mask reveal — the image fills from the bottom like rising water, with a living sine-wave crest cut from…

Libraries with Tailwind CSS mask effect components

• Pixel Perfect
• Aceternity UI
• Cult UI
• Spectrum UI
• Magic UI

Related categories

• Mask Effect Components
• React Mask Effect Components
• Animated Mask Effect Components
• Tailwind CSS Effect Components
• Tailwind CSS Marquee Components
• Tailwind CSS Transition Components
• Tailwind CSS Cursor Effect Components
• Tailwind CSS Image Effect Components
• Tailwind CSS Reveal Wrapper Components
• Tailwind CSS Border Effect Components
• Tailwind CSS Glow Effect Components
• Tailwind CSS Tilt Effect Components
• Tailwind CSS Spotlight Effect Components
• Tailwind CSS Blur Overlay Components
• Tailwind CSS Confetti Components