CSS: Workaround to backdrop-filter?

by

I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for backdrop-filter I’m using a slightly transparent background as a fallback:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

The filter will work in currently supported browsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed backdrop-filter if the spec doesn’t change before that.

Examples without and with backdrop-filter support:

transparent fallback
blurred

More Related Contents:

  1. Can I debug by CSS code in easy way for beginner?
  2. Setting columns in bootstrap grid
  3. How to write a:hover in inline CSS?
  4. Landscape printing from HTML
  5. Change color of PNG image via CSS?
  6. Use images instead of radio buttons
  7. Is it possible to have two background colors for a single html element? [duplicate]
  8. Why does overflow:hidden not work in a ?
  9. How to prevent scrollbar from repositioning web page?
  10. Fixed header, footer with scrollable content
  11. Two inline-block, width 50% elements wrap to second line [duplicate]
  12. How to hide image broken Icon using only CSS/HTML?
  13. Display HTML child element when parent element is display:none
  14. Why does overflow hidden stop floating elements escaping their container?
  15. add title attribute from css
  16. How to add background image for input type=”button”?
  17. How to specify parameters to google chrome adobe pdf viewer?
  18. How to rotate and postion an element on the top left or top right corner?
  19. Make fill entire screen?
  20. Remove host component tag from html in angular 4
  21. Bootstrap full-width text-input within inline-form
  22. Can you style html form buttons with css?
  23. Internet Explorer and clip-path
  24. Pseudo class :hover does not work in IE7
  25. centering a div between one that’s floated right and one that’s floated left
  26. How to select classes with spaces
  27. How to place Text and an Image next to each other in HTML?
  28. How to change style of radio and checkbox input [duplicate]
  29. How to make input autofocus in internet explorer?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment