Короткий ответ — да и нет: filter: blur() размывает то, что рендерится у элемента, включая его краевые пиксели, но при этом эффект может «обрываться» на границах области отрисовки/маски. Поэтому вы видите отсутствие размытия внизу, потому что размытие либо:
- обрезается границей элемента/маски (blur не «выходит» за box/фильтр-область), либо
- вы размываете сам верхний слой, а не то, что под ним (если сверху — прозрачная маска, фильтр не размывает фон под элементом).
Варианты исправления (выберите, что подходит под вашу задачу):
1) Если надо, чтобы размытие соседних пикселей верхнего слоя могло "вываливаться" за пределы элемента — расширьте область фильтра
- простой способ: сделать элемент визуально больше (padding/margin) и allow overflow: visible у родителя, чтобы эффект мог выходить за границы.
- более надёжный способ — использовать SVG-фильтр, в котором можно задать область фильтра (x/y/width/height). Пример:
<svg aria-hidden="true" style="position:absolute;width:0;height:0">
<filter id="gblur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" />
</filter>
</svg>
И в CSS: .top { filter: url(#gblur); }
Это позволит размытому ореолу выходить за пределы исходного блока.
2) Если вы хотите размыть фон (то, что находится под маской), а не сам верхний элемент — используйте backdrop-filter
- filter размывает содержимое самого элемента. backdrop-filter размывает фон за ним (то, что видно через прозрачность/маску).
Пример:
.overlay {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
/* чтобы backdrop-filter работал, элемент должен создавать «фон», например прозрачный bg или маска */
background: rgba(255,255,255,0.0001);
-webkit-mask-image: linear-gradient(...); /* ваша градиентная маска */
}
Обратите внимание на поддержку браузеров (Safari требует -webkit-backdrop-filter).
3) Если проблема в маске (маска резко обрывается) — скорректируйте сам градиент маски
- сделайте градиент маски чуть шире/плавнее, чтобы размытие «подхватывалось», или применяйте маску после применения SVG-фильтра в нужном порядке.
Резюме рекомендаций
- Если хотите, чтобы эффект «размытый край» влиял на пиксели за пределами элемента — используйте SVG-фильтр с расширенной областью (x/y отрицательные, width/height >100%) или увеличьте элемент/отступы.
- Если нужно размыть содержимое под прозрачной/маскированной поверхностью — используйте backdrop-filter.
- Покажите, пожалуйста, HTML/CSS (как вы накладываете изображение и маску) — тогда могу указать точное исправление и дать готовый фрагмент кода.