CODEWITHSUNDEEP
csshtml
James Mitchell
James Mitchell

Reputation: 2467

How to Blur Div Edges

Using CSS,

like the following: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

I want to us CSS (preferably not CSS3) to get the edges and corners to have that effect, instead of just sharp egdes.

Upvotes: 25

Views: 88337

Answers (1)

metadept
metadept

Reputation: 7949

You can achieve this effect by using a box-shadow the same color as the div's background, like this:

.blur-box {
    background-color: #555;
    box-shadow: 0 0 5px 10px #555;
}

You can adjust the second and third arguments (5px and 10px here) to tweak the relative size and blur radius (respectively) of the shadow in order to get it the way you want, and this feature is well supported by modern browsers (see: http://caniuse.com/#feat=css-boxshadow).

Here's a jsFiddle demo: http://jsfiddle.net/bXAFt/

Upvotes: 49

Related Questions