CSS3 Image Blur. Is it possible to create a blur effect with just one source image and CSS? Well, kind of: You stack the same image a couple times on top of each other and apply a combination of shifting, scaling and low opacity. The more blurry it should look the more stacking it would need. And there we already have the problem: It’s ugly markup and not really recommended. It probably also makes the browser super slow. Therefore, I’ll leave it at this and wait for CSS4. ;-) See the Demo → Update: Some people on twitter pointed out that it’s possible to apply SVG filters to HTML elements. I guess that’s the much better approach.

CSS3 Image Blur. Is it possible to create a blur effect with just one source image and CSS? Well, kind of:

You stack the same image a couple times on top of each other and apply a combination of shifting, scaling and low opacity. The more blurry it should look the more stacking it would need. And there we already have the problem: It’s ugly markup and not really recommended. It probably also makes the browser super slow. Therefore, I’ll leave it at this and wait for CSS4. ;-)

See the Demo →

Update: Some people on twitter pointed out that it’s possible to apply SVG filters to HTML elements. I guess that’s the much better approach.

  1. jeen-hao reblogged this from free-rider
  2. idmserial reblogged this from free-rider
  3. free-rider reblogged this from simurai and added:
    Golden Ticket Template
  4. cheap-papers reblogged this from jlofstedt
  5. cheap-papers reblogged this from simurai
  6. lysergica reblogged this from simurai
  7. damageinyou reblogged this from simurai
  8. anotherwenoki reblogged this from simurai
  9. jlofstedt reblogged this from simurai
  10. supirman reblogged this from simurai
  11. aldonahed reblogged this from simurai
  12. arte1misia reblogged this from simurai and added:
    one of my preferred but...don’t know how to do it …
  13. schadoosh reblogged this from simurai
  14. ritz-chan reblogged this from simurai and added:
    i like this so much!!amaaazzziinngg!!! :))
  15. barbeetch reblogged this from simurai
  16. arookiemistake reblogged this from simurai
  17. simurai posted this
Feed me