Can I make a nice blur transition in css?

Question

I want to have a blur effect in the background of my website. But you can see that the transition is really cutted and I would like to have a nice fade.

.ug-background_shader{
filter: blur(250px);
background-color: rgb(73, 73, 73);
height: 70%;
width: 80%;
// background-color:  radial-gradient(circle, rgba(255, 8, 8, 0.733) 40%, rgb(177, 30, 30) 100%);d
position: fixed;
// z-index: -2;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)}

I want to have blur effect but right now the the transition is really bad. — ungarmichael, Oct 16 '20 at 14:43
You can see that there are slight cuts in the transition so the blur effect is not really clean. — ungarmichael, Oct 16 '20 at 14:51

score 2 · Answer 1 · answered Oct 16 '20 at 14:38

2

You need to remove the filter : blur(250px)

answered Oct 16 '20 at 14:38

Kanishk Anand

1,686
1
7
16

Sorry for the bad explanation. I would like to have a clean transition from black to grey. – ungarmichael Oct 16 '20 at 14:50

score 1 · Accepted Answer · answered Oct 16 '20 at 15:17

1

First you should remove filter : blur(250px). Recommended blur value is near 5px.

Simply place an image in that place. It's way better if you don't want to see those low quality lines.

See this How can I prevent CSS gradient banding?

answered Oct 16 '20 at 15:17

Smooth Neon

433
5
13

2

Thank you for that helpful comment. I would upvote but I lost all of my points because people downvoted my question :( – ungarmichael Oct 16 '20 at 15:20
Oh no problem. I rarely visit stackoverflow so I'm happy I could help :) – Smooth Neon Oct 16 '20 at 15:28

Can I make a nice blur transition in css?

2 Answers2