Menu
Is it possible to add a blur effect to an image using CSS and Javascript?
322
For having a blurring effect use CSS filter property, which allows having effects like blur or color shifting on an element. The blur function of the filter property adds a Gaussian blur to the input image.
So, here's how to create a background blur using the backdrop-filter CSS property. backdrop-filter: blur(5px); That's it.
The HTMLElement. blur() method removes keyboard focus from the current element.
The first way of creating a blurred text is making your text transparent and applying shadow to it. The shadow will make the text appear blurred. Use a <div> with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.
Yep, this works a treat:
Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more...
Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well...
133
Alternatively you could use StackBlur or Superfast Blur
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
