Как пользоваться: Генератор CSS-масок
- Выберите эффект: затухание одного края, сверху и снизу, всех краёв, виньетка, прожектор или полосы.
- Настройте размер затухания, направление, положение или ширину полос ползунками.
- Проверьте результат на своей картинке с помощью Использовать моё изображение.
- Скопируйте CSS — он включает
-webkit-mask-image, который Chrome, Edge и Safari всё ещё требуют для некоторых свойств.
Как работают CSS-маски
mask-image использует изображение или градиент как трафарет: там, где маска непрозрачна, элемент виден; там, где она прозрачна, элемент исчезает, а между ними плавно затухает. Градиенты дают самые полезные маски, так как не требуют дополнительных файлов:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Затухание всех краёв требует два градиента, объединённых через
mask-composite: intersect(и-webkit-mask-composite: source-in). Генератор добавляет их автоматически. - Маски не меняют верстку и область кликов: затухающая часть по-прежнему кликабельна.
- В отличие от
opacity, маска может сделать прозрачной только часть элемента; в отличие от градиента-наложения, она показывает реальный фон за элементом.
Маски-фигуры и clip-path
Эффект Фигура превращает форму clip-path в встроенный SVG, который используется как mask-image. Результат выглядит как clip-path, но край можно растушевать, а фигуру масштабировать через mask-size и повторять через mask-repeat.
Чтобы вырезать жёсткие фигуры вместо затухания, используйте Генератор clip-path. Для цветовых эффектов — Генератор CSS-фильтров.
Также ищут как: css mask generator, mask-image генератор, mask image linear gradient, webkit mask image, css fade edges.
Инструменты, которые хорошо сочетаются с Генератор CSS-масок
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор SVG-волн — Создавайте волнистые разделители секций для лендингов: добавляйте и удаляйте волны (до 6, у каждой свой цвет, прозрачность и форма), задавайте количество гребней, высоту и плавность, выбирайте цвета и то, где будет волна: сверху или снизу.
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор глассморфизма — Создайте карточку с эффектом матового стекла с помощью ползунков и скопируйте кроссбраузерный CSS — с префиксом -webkit-backdrop-filter и запасным вариантом для старых браузеров.
Часто задаваемые вопросы
Как сделать затухание краёв изображения с помощью CSS?
Примените градиентную маску: mask-image: linear-gradient(to bottom, #000 70%, transparent) сделает затухание снизу. Чтобы затухли все края, объедините горизонтальный и вертикальный градиенты через mask-composite: intersect — для этого выберите «Затухание всех краёв» здесь.
Нужен ли мне по-прежнему -webkit-mask-image?
Да, для лучшей совместимости. Браузеры на основе Chromium и Safari всё ещё опираются на версии -webkit- для некоторых свойств маски, поэтому генератор выводит оба варианта.
В чём разница между mask-image и clip-path?
clip-path вырезает фигуру с жёсткими краями, а mask-image может плавно затухать, используя градиент или изображение как трафарет.
Как сделать мягкие края у фигуры clip-path?
clip-path всегда даёт жёсткие края. Выберите здесь эффект «Фигура»: те же формы превращаются в SVG-маску, а ползунок «Растушевка» размывает край, чтобы изображение плавно исчезало.
Можно ли использовать изображение или SVG как маску?
Да: выберите «Моё изображение или SVG как маска» и загрузите PNG с прозрачностью или SVG. Непрозрачные части показывают элемент, прозрачные — скрывают его. Задайте размер, повтор и положение маски, затем скопируйте CSS и укажите в url() путь к своему файлу.
Можно ли установить Генератор CSS-масок как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS-масок — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.