Размытие верхнего и нижнего фона div

Question

У меня есть div с серым фоном. в div у меня есть текст.

Я хочу размытие / сглаживание это верх и нижний цвет фона, а не сам фон только верх и низ, как сглаживание, например, в фотошопе .. (верх и низ, потому что ширина div составляет 100%, поэтому только верх и низ).

например (представьте, что ширина 100%):

<div id='this' style='background-color:gray; height: 500px;'></div>

Answer 1

Чтобы «размыть» фон с цветом solid, используйте линейный градиент.

Пример:

#this {
  background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
  height: 500px;
}

• См. (MDN)
• См. linear-gradient () (MDN)