Uploaded March 2022 | Updated September 2026, 1 week ago

---

A step-by-step guide to creating immersive background effects and beautiful gradient headlines using backdrop-filter and background-clip CSS properties.

You will also learn how to animate gradient backgrounds, pick colors that connect your UI with the background images—and how @supports at-rule can help you ensure everything works in browsers that don't support some CSS properties.

Codepen Demo: 🔗 codepen.io/ZoranJambor/pen/ExbroQV

Links:
🔗 backdrop-filter: developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
🔗 background-clip: developer.mozilla.org/en-US/docs/Web/CSS/background-clip
🔗 filter: developer.mozilla.org/en-US/docs/Web/CSS/filter
🔗 @supports: developer.mozilla.org/en-US/docs/Web/CSS/@supports
🔗 Sip color picker: sipapp.io

Timestamps:
00:00 Introduction
00:25 Demo setup
02:50 Creating glassmorphism effect
05:35 Adding gradient background to the button
07:26 Adding animated hover effect to the button
10:15 Adding gradient to the headline
12:05 Progressive enhancement using @supports at-rule
15:42 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor