Backdrop-filter

38 snippets

Browse backdrop-filter examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-backdrop-filter-examples

Snippets(38)

2021
A 2021 built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop Filter
A backdrop filter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop Filter Example
A backdrop filter example built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Cells with backdrop-filter
A cells with backdrop-filter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Cosmic 404 Page
A cosmic 404 page built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
FizzBuzz Photo Gallery
A fizzbuzz photo gallery built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Frosted Glass
A frosted glass built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Futuristic Button Styles (Fire & Ice)
A futuristic button styles (fire & ice) built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Glowing Blob Effect
A glowing blob effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Image Carousel
A image carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Image with Backdrop Effect
A image with backdrop effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Responsive Slider without JS Library
A responsive slider without js library built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Using the Backdrop Filter
A using the backdrop filter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Water Bottle
A water bottle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop-filter Blur
A backdrop-filter blur built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop-filter Example
A backdrop-filter example built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop-filter Using SVG Filter
A backdrop-filter using svg filter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Backdrop-filter: blur & scroll-behavior: smooth
A backdrop-filter: blur & scroll-behavior: smooth built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
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.
Frontend Ui Modern Design Web Components
Demo Code
Blurry Header
A blurry header built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Reflection with Progressive Blur in CSS
A reflection with progressive blur in css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Grid Lightbox Gallery Effect
A grid lightbox gallery effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Beginner
Browser 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.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Beginner
Browser 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.
Text Formatting Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Intermediate
Features
Glassmorphism, Text Animation, Futuristic UI
Responsive
Yes
Dark Ripple Pre-Loader (No-JS)
A dark ripple pre-loader (no-js) built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
No-JS, GPU accelerated animations, Glassmorphism
Responsive
Yes
Liquid Glass Effect
A liquid glass effect built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 50+, Edge 79+, Firefox 35+ (No distortion), Safari 9+
Features
Glassmorphism, SVG Filters, Backdrop Filter, Displacement Map
Responsive
Yes
Mac Dock Magnify Effect with :has
A mac dock magnify effect with :has built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
Magnify Effect, Neighbor Scaling, Glassmorphism
Responsive
Yes
Slide In/Out Gallery Effect
A slide in/out gallery effect built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Difficulty
Intermediate
Features
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.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, SVG Filters
Features
glassmorphism, liquid distortion, backdrop-blur
Glass Effect UI
A glass effect ui built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Features
glassmorphism, blur effect, translucent UI
Glassmorphism Profile Info Card
A glassmorphism profile info card built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+3 more
Demo Code
Technologies
HTML, SCSS
Difficulty
Intermediate
Browser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 9.1+
Features
Glassmorphism, CSS Masking, Grid Stacking
Responsive
Yes
Pure CSS Glass Effect
A pure css glass effect built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Beginner
Features
Glassmorphism, Backdrop Blur
Responsive
Yes
Morphing Profile Card Interaction
A morphing profile card interaction built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 88+, Edge 88+, Firefox 87+, Safari 15+
Features
Aspect-ratio Animation, Content Reveal, Hover Effect, Dark Mode
Responsive
Yes
Scrolling 3D Card Carousel
A scrolling 3d card carousel built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Content Card+2 more
Demo Code
Technologies
GSAP, ScrollTrigger
Difficulty
Intermediate
Features
3D Transforms, Scroll-bound Animation, Perspective Shift
Responsive
Yes
Glassmorphic HSL Color Palette Generator
A glassmorphic hsl color palette generator built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 111+, Edge 111+, Safari 16.2+, Firefox 113+
Features
WCAG Contrast Check, HSL Harmony Engine, Local Storage State, CSS/JSON Export, Glassmorphism UI
Responsive
Yes
Interactive 3D Pricing Card Slider
A interactive 3d pricing card slider built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Content Card+2 more
Demo Code
Technologies
Pug, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
WebGL Rendering, Mouse Tracking, Carousel Slider
Responsive
Yes
WebGL Liquid Slider Transition
A webgl liquid slider transition built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Html Frontend Ui+2 more
Demo Code
Technologies
WebGL, Canvas API, JavaScript
Difficulty
Advanced
Features
Liquid Distortion, RGB Split, Glassmorphism, Displacement Mapping
Responsive
Yes
Responsive Grid Restaurant Menu Layout
A responsive grid restaurant menu layout built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Text Formatting Semantic Html+5 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Browser support
Chrome 76+, Edge 79+, Firefox 103+, Safari 10.1+
Features
Semantic HTML, Fluid Grid
Responsive
Yes

Snippets(38)

related hubs