3D Floating Books Composition with Three.js and GSAP
A 3d floating books composition with three.js and gsap built with modern frontend techniques for responsive and reusable UI.
Mix-blend-mode
46 snippetsBrowse mix-blend-mode examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-mix-blend-mode
Snippets(46)
3D Patronus Magic CardA 3d patronus magic card built with modern frontend techniques for responsive and reusable UI.
- Animated Navigation with GSAP and mix-blend-mode
A animated navigation with gsap and mix-blend-mode built with modern frontend techniques for responsive and reusable UI.
Animated SVG Danger TextA animated svg danger text built with modern frontend techniques for responsive and reusable UI.
Atmospheric Split-View GalleryA atmospheric split-view gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 41+, Edge 79+, Firefox 32+, Safari 8+Features
Texture Blending, Card Flip, Keyboard Navigation, Class-based State
Blend Mode Cheat SheetA blend mode cheat sheet built with modern frontend techniques for responsive and reusable UI.
Bouncy CounterA bouncy counter built with modern frontend techniques for responsive and reusable UI.
- Chromatic Aberration Effect with CSS
A chromatic aberration effect with css built with modern frontend techniques for responsive and reusable UI.
Day and Night Toggle with SVG AnimationA day and night toggle with svg animation built with modern frontend techniques for responsive and reusable UI.
Elastic Portfolio Navigation with GSAPA elastic portfolio navigation with gsap built with modern frontend techniques for responsive and reusable UI.
Hyperplexed Evervault Card Hover EffectA hyperplexed evervault card hover effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Dynamic Masking, Random Character String, Mouse Tracking, Mix-blend-mode
Lenis Smooth Scroll Cinematic ExperienceA lenis smooth scroll cinematic experience built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 14.1+Features
Lenis Smooth Scroll, GSAP ScrollTrigger, Film Roll Effect, Clipboard API Integration- Mouse-Following Blend Mode Art
A mouse-following blend mode art built with modern frontend techniques for responsive and reusable UI.
Mouse-Tracking Linear Shine ButtonA mouse-tracking linear shine button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, TypeScriptDifficulty
IntermediateBrowser support
Chrome 49+, Edge 79+, Firefox 32+, Safari 8+Features
Mouse Tracking, Radial Gradients
Neon Elastic Stroke Radio ButtonA neon elastic stroke radio button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 50+, Edge 79+, Firefox 50+, Safari 10+Features
SVG Stroke Animation, GSAP Easing, Neon Glow Effect, Elastic Motion
Parallax Effect with Text Blend ModeA parallax effect with text blend mode built with modern frontend techniques for responsive and reusable UI.
Scroll-Driven Image SwapperA scroll-driven image swapper built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 115+, Edge 115+. Firefox/Safari (via GSAP Polyfill)Features
Scroll-Linked Animation, Image Crossfade, Polyfill Strategy, Responsive Grid
Simple Full-Screen Slideshow With Vanilla JavaScriptA simple full-screen slideshow with vanilla javascript built with modern frontend techniques for responsive and reusable UI.
Sketch ButtonA sketch button built with modern frontend techniques for responsive and reusable UI.
Social Feed: Poll with AnimationA social feed: poll with animation built with modern frontend techniques for responsive and reusable UI.
Staggered Particle Blob EffectA staggered particle blob effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 79+, Edge 79+, Firefox 71+, Safari 13+Features
Cursor Tracking, Staggered Animation, Auto-simulation, Blend Modes
Resizing Tab Bar with Anchor PositioningA resizing tab bar with anchor positioning built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 125+, Edge 125+Features
CSS Anchor Positioning, Scroll-Driven Animations, CSS Masking, Mix-Blend-Mode
CSS Only Ink Splash Video Manipulation EffectA css only ink splash video manipulation effect built with modern frontend techniques for responsive and reusable UI.
Dynamic Image Colorizing without JSA dynamic image colorizing without js built with modern frontend techniques for responsive and reusable UI.
CalculatorA calculator built with modern frontend techniques for responsive and reusable UI.
Editorial Layout: Andy WarholA editorial layout: andy warhol built with modern frontend techniques for responsive and reusable UI.
Spheres but Not SpheresA spheres but not spheres built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Features
CSS Gradients, Blend Modes, Visual EffectsResponsive
Yes- Pure CSS Hexagon Slices
A pure css hexagon slices built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Clip-path, Geometric shapesResponsive
Yes 
Iridescent 3D Neumorphic ButtonA iridescent 3d neumorphic button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
AdvancedBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Iridescent Gradient, Complex Layered Shadows, Neumorphic Depth, Blending ModesResponsive
Yes
Amateur Radio Badge 3DA amateur radio badge 3d built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS 3D, JavaScript, SVGDifficulty
AdvancedFeatures
3D transforms, Parallax, Holographic effect, Mouse trackingResponsive
Yes
Grainy Gradient Text with CSS HoudiniA grainy gradient text with css houdini built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, SVG Filters, CSS Custom PropertiesDifficulty
AdvancedFeatures
Animated Gradients, Grainy Texture, Holographic EffectResponsive
Yes- CSS Holographic Masks
A css holographic masks built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Iridescent Effect, Mix-blend-mode, Pure CSSResponsive
Yes 
RGB Dot PreloaderA rgb dot preloader built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
intermediateFeatures
RGB Color Blending, Kaleidoscopic AnimationResponsive
Yes
Animated Grid Tracks with :has()A animated grid tracks with :has() built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Grid, CSS :has() selectorDifficulty
IntermediateFeatures
Expanding grid tracks, Hover-triggered animations, Blend mode effectsResponsive
Yes
CSS :has() Character Select ScreenA css :has() character select screen built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
CSS State Management, No JavaScript Logic, Responsive GridResponsive
Yes
Dynamic Article Hover CursorA dynamic article hover cursor built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Custom Cursor, CSS :has(), Blend Modes, Grid LayoutResponsive
Yes
Image Peeling Hover EffectA image peeling hover effect built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
hover animation, image distortion, flare effectResponsive
Yes
Animated Electric Border CSS CardA animated electric border css card built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 111+, Edge 111+, Firefox 113+, Safari 15.4+Features
Turbulent Glow, SVG Filter, Multi-layer Setup, CSS VariablesResponsive
Yes
Neuomorphic Fingerprint ScannerA neuomorphic fingerprint scanner built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGDifficulty
IntermediateFeatures
Neuomorphism, Animation, Glow Effects
Spotlight Cursor on Responsive ImageA spotlight cursor on responsive image built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, CSS3Difficulty
IntermediateFeatures
Custom Cursor, Color Inversion, Interactive GradientResponsive
Yes
Image Duotoning with SCSSA image duotoning with scss built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, CSS3Difficulty
intermediateFeatures
mix-blend-mode, duotone filter, customizable colors
Pure CSS Mix-Blend-Mode Dark ToggleA pure css mix-blend-mode dark toggle built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 41+, Edge 79+, Firefox 32+, Safari 8+Features
No JavaScript, Color Inversion, Curtain EffectResponsive
Yes
Holographic Name Card with Hover EffectsA holographic name card with hover effects built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Custom Properties, JavaScript, CSS 3D TransformsDifficulty
AdvancedFeatures
Holographic Glare, Cursor Tracking, Parallax DepthResponsive
Yes
Moiré Psy-Dance Party VIP Access Card (CSS Only)A moiré psy-dance party vip access card (css only) built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
AdvancedFeatures
Moiré effect, 3D Transforms, Pure CSS AnimationResponsive
Yes
Turbulence Effect with Blend ModesA turbulence effect with blend modes built with modern frontend techniques for responsive and reusable UI.
Difficulty
advancedFeatures
SVG filters, CSS blend modes, 3D transformsResponsive
Yes
LapisCordis: A Greco-Roman Mythological Card GameA lapiscordis: a greco-roman mythological card game built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Smooth animations, Interactive card effects, Thematic TCG interface