DEV Community

loading...

Awesome blur)

GEDEV
・1 min read

I know that css have a blur property) but using only that property is not enough to get blur effect as shown in the image. Who knows how it can be done by css or who have some example?

Alt Text

ThankS)

Discussion (4)

Collapse
jackkeller profile image
Jack Keller

You would need to create the icon as two parts, overlay them using absolute positioning, then blur the top element using filter: blur(5px) if you wanted a 5px blur. This will not work properly in IE11 (surprise, but no biggie) or Firefox (surprised! c'mon Firefox!).

Here is a quick example I worked up using an SVG created with two simple shapes. This does not need absolute positioning as they're contained in an SVG group.

Collapse
jackkeller profile image
Jack Keller

I realize now looking at your example, this isn't exactly what you were looking for, the concept would be a bit different using clipping paths perhaps. If I have time later I'll see if I can work that up as an example.

Collapse
jackkeller profile image
Jack Keller

Okay, updated the codepen above, now you'll see there are two triangles but one is a clip path of the circle (roughly, zooming in will expose the top portion isn't perfectly aligned) and that is the only part being blurred now.

There are likely way easier ways to accomplish this but this is a way I suppose.

Thread Thread
wmgevg profile image
GEDEV Author

Thank you so much for solutuon))
For the first look, it's looking pretty similar I thought it could be done without SVG
but this solution also ok. First I need to learn SVG stuff