Tailwind CSS Image Effect Components

Dev Design Library indexes 37 Tailwind CSS image effect components from 16 open-source UI libraries, with the most coming from Aceternity UI, Componentry, GreatUI, Animations (Svelte) and Amicro Micro Transitions. 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. Image effect components belong to the Effects group.

• BacklightMagic UI · ReactA backlight glow effect for videos, images, and SVGs.
• Dither ImageCult UI · ReactCompound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props
• I
  Img FxLibraries.dev · ReactAnimated WebGL image-generation / loader effect for React cards
• Page Turn CurlAmicro Micro Transitions · ReactRising paper sheet with dynamic corner curling border-radius transition.
• Holographic Scan RevealSpectrum UI · Reactcomponent for the Holographic Scan Reveal
• Ascii Glitch RippleVengeance UI · ReactDynamic character-scramble wave ripple hover effect
• Img PixelatePixel Perfect · ReactSnaps the image to a square grid whose resolution breathes over time.
• Ascii EffectComponentry · ReactRender images as responsive ASCII artwork with image, flow, and glitch variations.
• Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
• Image SplitBadtz UI · ReactThis component provides a dynamic and visually captivating way to display images split into multiple sections.
• Hover ImgObsidianUI · React
• Ascii ImageGreatUI · React
• Lens RevealUI Lab · ReactA lens follows your cursor and shows the specs hidden under a card.
• Image TrailCojeev UI · ReactDistance-triggered image impressions follow the pointer and fade away.
• Ascii ArtAceternity UI · React
• Image Cropperark-cn · ReactA shadcn-style image cropper component built with Ark UI primitives.
• Pixel ImageMagic UI · ReactA component that displays an image with a pixelated effect, creating a retro aesthetic.
• Shader Lens BlurCult UI · ReactWebGL shader component with lens blur effects and mouse interaction
• Sticky Note PeelAmicro Micro Transitions · ReactPost-it memo note peeling upwards in 3D perspective from pad.
• Dithered LogoComponentry · ReactAn interactive particle logo that turns image assets into a dithered canvas field with cursor ripples.
• Pixel ImageAnimations (Svelte) · SvelteAn image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.
• Image TrailBadtz UI · ReactImage Trail adds a dynamic, interactive trail of images that follows the cursor, enhancing user engagement and visual…
• Frosted Glass RevealGreatUI · React
• Glass LensUI Lab · React
• Chromatic ImageAceternity UI · React
• Bookmark Corner PeelAmicro Micro Transitions · React
• Hover TransitionComponentry · ReactEight polished hover transitions with per-card animation, direction, color, and content controls.
• Fancy Pixelate Svg FilterAnimations (Svelte) · Svelte
• Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
• Image Hover RevealGreatUI · React
• Dither ShaderAceternity UI · React
• Image Ripple EffectComponentry · ReactWebGL-powered cursor ripples that displace layered image cards in real time.
• B
  BacklightAnimations (Svelte) · SvelteAn SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.
• Pixel To Ascii ImageGreatUI · React
• Pixelated CanvasAceternity UI · React
• Pixel Image TrailComponentry · ReactAn image reveal made from cursor-painted squares that expire into a bounded pixel trail.
• Webcam Pixel GridAceternity UI · React

Libraries with Tailwind CSS image effect components

• Aceternity UI
• Componentry
• GreatUI
• Animations (Svelte)
• Amicro Micro Transitions

Related categories

• Image Effect Components
• React Image Effect Components
• Svelte Image Effect Components
• Animated Image Effect Components
• Tailwind CSS Effect Components
• Tailwind CSS Marquee Components
• Tailwind CSS Transition Components
• Tailwind CSS Cursor Effect Components
• Tailwind CSS Mask 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