1

I have a div, with a gray background. within the div i have some text.

I want to blur/smooth it's top and bottom background color, not the background it self just the top and bottom like smoothing it out as you can do in photoshop for example..(top and bottom because the div's width is 100% so only top and bottom).

for example (imagine it's width is 100%):

<div id='this' style='background-color:gray; height: 500px;'></div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Raz Cohen
  • 11
  • 3
  • like the second example here: https://stackoverflow.com/a/60576379/8620333 ? I am bluring the 4 direction but it can easily be only 2 – Temani Afif Jun 16 '20 at 14:53

1 Answers1

0

To "blur" a background with a solid color, use a linear gradient.

Example:

#this {
  background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
  height: 500px;
}
charles
  • 1,814
  • 2
  • 13
  • 19