Как пользоваться: Маска формы для изображения
- Выберите фигуру — те же, что в генераторе clip-path, плюс сердце.
- Увеличьте Feather для мягкого края или оставьте 0 для чёткого выреза.
- Измените Size, чтобы уменьшить фигуру внутри элемента, и попробуйте Использовать моё изображение.
- Скопируйте CSS — фигура задана встроенным SVG, дополнительный файл не нужен.
Маски формы и clip-path
clip-path вырезает чёткую фигуру и является самым простым вариантом, когда нужны жёсткие края. Маска формы использует SVG как mask-image: у неё могут быть мягкие, растушёванные края, её можно масштабировать через mask-size и позиционировать через mask-position, а также использовать любую SVG-фигуру — даже ваш логотип (выберите «Моё изображение или SVG как маска»).
Для фигур с чёткими краями и перетаскиваемыми точками используйте Генератор clip-path; для органичных форм — Генератор SVG-блобов.
Также ищут как: css маска изображения по форме, mask image css форма, фото в форме сердца css, изображение в форме звезды css, шестиугольник css изображение, вырез по форме css, css mask svg форма.
Инструменты, которые хорошо сочетаются с Маска формы для изображения
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- Градиент краёв изображения CSS — Придайте фото и фоновым изображениям мягкие, затухающие края одним правилом CSS без редактирования картинки.
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор CSS-треугольников — Создайте треугольник на чистом CSS для стрелки подсказки, указателя выпадающего меню или облачка речи: выберите одно из 8 направлений, ширину, высоту и цвет, а затем скопируйте либо классический приём с border, либо более простую версию на clip-path.
Часто задаваемые вопросы
Как поместить изображение внутрь формы сердца или звезды?
Выберите фигуру здесь и скопируйте CSS: он задаёт SVG-контур фигуры как mask-image для вашего изображения, поэтому видна только внутренняя часть фигуры.
Может ли фигура иметь мягкие края?
Да — увеличьте Feather. SVG-фигура размывается, и изображение плавно исчезает у края. clip-path так не умеет: он всегда даёт жёсткие края.
Можно ли использовать свою фигуру или логотип?
Да — выберите «Моё изображение или SVG как маска» и загрузите PNG с прозрачностью или SVG.
Можно ли установить Маска формы для изображения как веб-приложение и пользоваться им офлайн?
Да. Маска формы для изображения — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.