A 2021 built with modern frontend techniques for responsive and reusable UI.
Backdrop-filter
38 snippetsBrowse backdrop-filter examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-backdrop-filter-examples
Snippets(38)
- 2021
- Backdrop Filter
A backdrop filter built with modern frontend techniques for responsive and reusable UI.
- Backdrop Filter Example
A backdrop filter example built with modern frontend techniques for responsive and reusable UI.
- Cells with backdrop-filter
A cells with backdrop-filter built with modern frontend techniques for responsive and reusable UI.
- Cosmic 404 Page
A cosmic 404 page built with modern frontend techniques for responsive and reusable UI.
- FizzBuzz Photo Gallery
A fizzbuzz photo gallery built with modern frontend techniques for responsive and reusable UI.
- Frosted Glass
A frosted glass built with modern frontend techniques for responsive and reusable UI.
- Futuristic Button Styles (Fire & Ice)
A futuristic button styles (fire & ice) built with modern frontend techniques for responsive and reusable UI.
- Glowing Blob Effect
A glowing blob effect built with modern frontend techniques for responsive and reusable UI.
- Image Carousel
A image carousel built with modern frontend techniques for responsive and reusable UI.
- Image with Backdrop Effect
A image with backdrop effect built with modern frontend techniques for responsive and reusable UI.
- Responsive Slider without JS Library
A responsive slider without js library built with modern frontend techniques for responsive and reusable UI.
- Using the Backdrop Filter
A using the backdrop filter built with modern frontend techniques for responsive and reusable UI.
- Water Bottle
A water bottle built with modern frontend techniques for responsive and reusable UI.
- Backdrop-filter Blur
A backdrop-filter blur built with modern frontend techniques for responsive and reusable UI.
- Backdrop-filter Example
A backdrop-filter example built with modern frontend techniques for responsive and reusable UI.
- Backdrop-filter Using SVG Filter
A backdrop-filter using svg filter built with modern frontend techniques for responsive and reusable UI.
- Backdrop-filter: blur & scroll-behavior: smooth
A backdrop-filter: blur & scroll-behavior: smooth built with modern frontend techniques for responsive and reusable UI.
- IOS-Style Transparency Effect in CSS With Backdrop-Filter
A ios-style transparency effect in css with backdrop-filter built with modern frontend techniques for responsive and reusable UI.
- Blurry Header
A blurry header built with modern frontend techniques for responsive and reusable UI.
- Reflection with Progressive Blur in CSS
A reflection with progressive blur in css built with modern frontend techniques for responsive and reusable UI.
- Grid Lightbox Gallery Effect
A grid lightbox gallery effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 13+Features
Dense Grid, Focus Trap - Glassmorphic Advanced Navigation System
A glassmorphic advanced navigation system built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 76+, Edge 79+, Firefox 70+, Safari 14+Features
Glassmorphism, Sticky Header, Mobile Overlay Menu, Smooth Scroll - Futuristic Card Effect
A futuristic card effect built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Glassmorphism, Text Animation, Futuristic UIResponsive
Yes - Dark Ripple Pre-Loader (No-JS)
A dark ripple pre-loader (no-js) built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
BeginnerFeatures
No-JS, GPU accelerated animations, GlassmorphismResponsive
Yes - Liquid Glass Effect
A liquid glass effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 50+, Edge 79+, Firefox 35+ (No distortion), Safari 9+Features
Glassmorphism, SVG Filters, Backdrop Filter, Displacement MapResponsive
Yes - Mac Dock Magnify Effect with :has
A mac dock magnify effect with :has built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
IntermediateFeatures
Magnify Effect, Neighbor Scaling, GlassmorphismResponsive
Yes - Slide In/Out Gallery Effect
A slide in/out gallery effect built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Hover animations, Image gallery, Caption sliding - Apple Liquid Glass UI (2025)
A apple liquid glass ui (2025) built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVG FiltersFeatures
glassmorphism, liquid distortion, backdrop-blur - Glass Effect UI
A glass effect ui built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
glassmorphism, blur effect, translucent UI - Glassmorphism Profile Info Card
A glassmorphism profile info card built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSSDifficulty
IntermediateBrowser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 9.1+Features
Glassmorphism, CSS Masking, Grid StackingResponsive
Yes - Pure CSS Glass Effect
A pure css glass effect built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
BeginnerFeatures
Glassmorphism, Backdrop BlurResponsive
Yes - Morphing Profile Card Interaction
A morphing profile card interaction built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 87+, Safari 15+Features
Aspect-ratio Animation, Content Reveal, Hover Effect, Dark ModeResponsive
Yes - Scrolling 3D Card Carousel
A scrolling 3d card carousel built with modern frontend techniques for responsive and reusable UI.
Technologies
GSAP, ScrollTriggerDifficulty
IntermediateFeatures
3D Transforms, Scroll-bound Animation, Perspective ShiftResponsive
Yes - Glassmorphic HSL Color Palette Generator
A glassmorphic hsl color palette generator built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 111+, Edge 111+, Safari 16.2+, Firefox 113+Features
WCAG Contrast Check, HSL Harmony Engine, Local Storage State, CSS/JSON Export, Glassmorphism UIResponsive
Yes - Interactive 3D Pricing Card Slider
A interactive 3d pricing card slider built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
WebGL Rendering, Mouse Tracking, Carousel SliderResponsive
Yes - WebGL Liquid Slider Transition
A webgl liquid slider transition built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, Canvas API, JavaScriptDifficulty
AdvancedFeatures
Liquid Distortion, RGB Split, Glassmorphism, Displacement MappingResponsive
Yes - Responsive Grid Restaurant Menu Layout
A responsive grid restaurant menu layout built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
BeginnerBrowser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 10.1+Features
Semantic HTML, Fluid GridResponsive
Yes


























