--- title: Next-level frosted glass with backdrop-filter • Josh W.... description: Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism... canonical: https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Next-level frosted glass with backdrop-filter • Josh W. Comeau | daily.dev og:description: Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism... og:url: https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi og:image: https://api.daily.dev/og/posts/eogX8ihMI.png og:image:alt: Next-level frosted glass with backdrop-filter • Josh W. Comeau og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Next-level frosted glass with backdrop-filter • Josh W. Comeau **[Josh W Comeau](https://daily.dev/sources/joshwcomeau)** · 13 min read · 634 upvotes · 19 comments ## Summary Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism of your web projects. This guide covers the intricacies of CSS filters, handling browser compatibility, and fixing common issues like pixel consideration and flickering. It includes practical demonstrations, code snippets, and tips for improving performance and visual quality. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@petecapecod** · 4 upvotes > Seriously another amazing blog post by Josh 🤩🎉 > > I love that you let us play around with the CSS and such in the post. Really helps with understanding exactly what is happening. > > Thanks Josh 👍🏻 **@legacy8** · 2 upvotes > Cool stuff **@timoransky** · 2 upvotes > Great article! It always bugged me, that the blur is not taking into account the near pixels as well but it never occurred to me to do this trick. **@justi** · 1 upvotes > Well explained nice trick! **@travisl** · 1 upvotes > Excellent work as always, Josh! Keep it up 👏 ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Next-level frosted glass with backdrop-filter • Josh W. Comeau","url":"https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi"},"datePublished":"2024-12-02T18:13:41.609Z","dateModified":"2024-12-08T20:18:28.419Z","description":"Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/98f6bfeeda5e791cb37709533ccc00f0?_a=AQAEuj9","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/98f6bfeeda5e791cb37709533ccc00f0?_a=AQAEuj9","isAccessibleForFree":true,"articleSection":"Josh W Comeau","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Josh W Comeau","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a121572d03c40a2bff9e8ed0f0792b5","url":"https://daily.dev/sources/joshwcomeau"},"commentCount":19,"discussionUrl":"https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":634},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":19}],"keywords":"webdev,css,frontend","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Josh W Comeau","item":"https://daily.dev/sources/joshwcomeau"},{"@type":"ListItem","position":3,"name":"Next-level frosted glass with backdrop-filter • Josh W. Comeau"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/next-level-frosted-glass-with-backdrop-filter-josh-w-comeau-eogx8ihmi","comment":[{"@type":"Comment","text":"Seriously another amazing blog post by Josh 🤩🎉\nI love that you let us play around with the CSS and such in the post. Really helps with understanding exactly what is happening.\nThanks Josh 👍🏻","datePublished":"2024-12-03T15:32:39.864Z","url":"https://daily.dev/posts/eogX8ihMI#c-KaJaoHBwj","author":{"@type":"Person","name":"Peter Cruckshank","url":"https://daily.dev/petecapecod","image":"https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Cool stuff","datePublished":"2024-12-03T18:09:56.097Z","url":"https://daily.dev/posts/eogX8ihMI#c-zIlIunmm7","author":{"@type":"Person","name":"Legacy","url":"https://daily.dev/legacy8","image":"https://avatars.githubusercontent.com/u/52163001?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Great article! It always bugged me, that the blur is not taking into account the near pixels as well but it never occurred to me to do this trick.","datePublished":"2024-12-03T12:24:08.421Z","url":"https://daily.dev/posts/eogX8ihMI#c-03BB9w0jB","author":{"@type":"Person","name":"Ján Timoranský","url":"https://daily.dev/timoransky","image":"https://lh3.googleusercontent.com/a/AAcHTtcXo45AlNahfY0K-2i47sF7ofMOvsjhYrVqGNY1xw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Well explained nice trick!","datePublished":"2024-12-04T09:28:11.982Z","url":"https://daily.dev/posts/eogX8ihMI#c-Gqy01Cf8x","author":{"@type":"Person","name":"Justi","url":"https://daily.dev/justi","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Excellent work as always, Josh! Keep it up 👏","datePublished":"2024-12-04T02:36:46.344Z","url":"https://daily.dev/posts/eogX8ihMI#c-mhID3iqWS","author":{"@type":"Person","name":"Travis","url":"https://daily.dev/travisl","image":"https://avatars.githubusercontent.com/u/99340338?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```