Как пользоваться: Градиент краёв изображения CSS
- Предпросмотр сразу открывается с режимом Затухание всех краёв. Перетащите ползунок Размер затухания, чтобы сделать мягкую границу шире или уже.
- Переключите эффект на затухание только одной стороны (например, низа главного изображения) или верха и низа.
- Проверьте эффект на своём фото с помощью кнопки Использовать моё изображение.
- Скопируйте CSS и добавьте его к изображению или его контейнеру.
Зачем затухать края с помощью маски?
С помощью градиентной маски изображение плавно растворяется в том, что находится за ним: фоном страницы, градиентом или другой картинкой. Вместо цветного слоя поверх картинки сама картинка становится прозрачной. Это работает на любом фоне, в светлой и тёмной темах, и не меняет файлы изображений.
img.soft {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}Два градиента, вертикальный и горизонтальный, объединяются через mask-composite: intersect, поэтому затухают все четыре стороны. Для круглых эффектов, похожих на виньетку, используйте генератор виньетки CSS, а для фигурных обрезок — маску формы изображения.
Также ищут как: css fade edges, mask-image css.
Инструменты, которые хорошо сочетаются с Градиент краёв изображения CSS
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
- CSS-генератор фильтров — Настройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера или своего изображения и скопируйте CSS-свойство filter.
Часто задаваемые вопросы
Как сделать затухание краёв картинки на CSS?
Используйте градиентную маску: mask-image: linear-gradient(...) от transparent к #000 и обратно. Чтобы затухали все четыре края, объедините вертикальный и горизонтальный градиенты через mask-composite: intersect, как это делает генератор.
Как затушевать только низ изображения?
Выберите «Затухание одного края» и направление Bottom: mask-image: linear-gradient(to bottom, #000 60%, transparent).
Работает ли это с фоновыми изображениями?
Да. Поместите маску на элемент, у которого есть background-image: затухнет весь элемент, включая фон.
Можно ли установить Градиент краёв изображения CSS как веб-приложение и пользоваться им офлайн?
Да. Градиент краёв изображения CSS — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.