Исправляем градиентное размытие снизу в CSS

При наложении размытого изображения с маской на оригинал часто возникает проблема: снизу размытие пропадает, хотя градиент маски задан корректно. Это происходит из-за того, что filter: blur() размывает края самого элемента, а маска обрезает их вместе с размытием. Разберём, как добиться плавного размытия по всей высоте, как в оригинале.

Почему не работает размытие снизу?

Основная причина - filter: blur(20px) создаёт размытие за пределами видимой области изображения. Маска mask-image обрезает элемент по своему контуру, убирая размытые пиксели у нижнего края. В результате градиент резко обрывается, а не сходит на нет.

Как исправить: используем clip-path вместо mask-image

Для плавного размытия снизу примените clip-path в сочетании с filter. Это позволит размыть изображение полностью, а затем обрезать его по нужному контуру без потери размытия у краёв.

.blurr {
    filter: blur(20px);
    clip-path: inset(0);
    /* или более точный полигон */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Другой подход: масштабирование с overflow

Если clip-path не подходит, увеличьте размер размытого слоя на 10-20% через transform: scale(1.1) и задайте overflow: hidden родителю. Это компенсирует обрезание размытых краёв маской. Пример:

.blurr {
    filter: blur(20px);
    transform: scale(1.1);
}
.eventimage {
    overflow: hidden;
}

Сравнение методов

• clip-path - точное обрезание без потери размытия, подходит для любых градиентов.
• transform: scale - простое решение, но может сдвинуть картинку, требует корректировки позиционирования.
• mask-image - не рекомендуется для blur(), так как обрезает размытые края.

Готовый рабочий код

Замените класс .blurr на следующий:

.blurr {
    filter: blur(20px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* или используйте inset */
    clip-path: inset(0);
}

Остальные стили и HTML-структура остаются без изменений. Теперь размытие будет плавным от верхнего края до нижнего, как в оригинальной карточке.