css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Playing with CSS transparency and blur filter to simulate "frosted film" translucency effect featured in OS X Yosemite...

Current browser support is limited, however: http://caniuse.com/#feat=css-filters

Update 2018.04.16: Blurred :before element's size extended beyond visible bounds to eliminate blur falloff of the filter. Added $blur variable for easier manipulation.

Update 2018.05.30: Replaced jQueryUI with D3 for dragging.


  1. Brilliant work. This is a good style for widgets.

  2. The power of "background: inherit" ;-) http://codepen.io/Kseso/pen/JBrcD

  3. it is good. this is also mine :) http://codepen.io/ozer/pen/ckwyd/

  4. that's perfect there are plugin for blur but not supporting background-size: cover; which I was looking for a long time :) Thanks :)

  5. I can't seem to get this to work on my page. I pretty much copied the code verbatim (with a different background image)... Is codepen doing something fancy that I'm unaware of?

    When I directly add a background image to the article tag the blur works, but it get placed on top of the content.

  6. just remove the “-webkit-” and it will work on every browser (since SCSS readds the webkit prefix, and firefox supports prefixless filters)


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.