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

CodePen by Jon Kantner: https://codepen.io/jkantner/details/GgRagRY

CodePen for This Tutorial: https://codepen.io/kevinpowell/pres/gbbZEPr/f8b847a6670e9ef8f691e77443d8721c

CSS Generators: https://css-generators.com/

Blog Post by Josh Comeau: https://www.joshwcomeau.com/css/backdrop-filter/