CODEWITHSUNDEEP
css
Vincent
Vincent

Reputation: 161

How to make a blur effect over a shape in CSS?

I have an shape with blur background like this:

Blur Effect

I want to put in on my layout without having to cut it from the PSD file. And I have tried to use CSS to create it but what I have got till now is just a shape with a solid background. Any answers from any superman would be highly appreciated! Thank you very much,!

These are my code until now:

.sld-shadow {
  width: 100%;
  border-left: 96px solid transparent;
  border-right: 96px solid transparent;
  border-bottom: 36px solid rgba(0,0,0,0.5);
}
<div class="sld-shadow"></div>

Upvotes: 1

Views: 3629

Answers (1)

Jack Guy
Jack Guy

Reputation: 8523

You could use CSS filters:

.sld-shadow {
  filter: blur(20px);
}

You'll want to make sure that you have browser support as well.

Upvotes: 2

Related Questions