This tutorial is for members only
Learn Straight from the Experts Who Shape the Modern Web
200+
In-Depth Courses
21
Learning Paths
Industry Leading Experts
Live Interactive Workshops
Member Exclusive
Create a Frosted Glass Effect with a Gradient Border
Kevin Powell Media Inc.
Creative Coding
CSS
June 3, 2025
Watch Kevin recreate a frosted glass effect using backdrop-filter and a linear-gradient border.
🔗 Links
Blog Post by Josh Comeau:
https://www.joshwcomeau.com/css/backdrop-filter/
CSS Generators:
https://css-generators.com/
CodePen for This Tutorial:
https://codepen.io/kevinpowell/pres/gbbZEPr/f8b847a6670e9ef8f691e77443d8721c
CodePen by Jon Kantner:
https://codepen.io/jkantner/details/GgRagRY
CSS
Creative Coding
Popular
Latest
