Как пользоваться: CSS-виньетка
- В превью сразу показана радиальная виньетка. Выберите эллипс (он повторяет форму изображения) или круг.
- Задайте Непрозрачную область (полностью видимый центр) и Затухание до (место, где изображение становится полностью прозрачным).
- Используйте Прожектор, чтобы сместить видимую область от центра.
- Скопируйте CSS.
Виньетка с помощью mask-image
.vignette {
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}Центр остаётся полностью видимым до первой остановки и становится прозрачным к второй. В отличие от тёмного оверлея, виньетка через маску растворяет изображение в реальный фон страницы, поэтому она работает с любым цветом. Для линейного затухания см. Затухание краёв изображения в CSS.
Также ищут как: маска radial gradient, генератор виньетки.
Инструменты, которые хорошо сочетаются с CSS-виньетка
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- Маска формы для изображения — Поместите любое фото внутрь фигуры — звезды, сердца, шестиугольника, круга, стрелки, облачка… — с помощью CSS mask-image.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- CSS-генератор фильтров — Настройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера или своего изображения и скопируйте CSS-свойство filter.
Часто задаваемые вопросы
Как добавить виньетку к изображению в CSS?
Примените маску radial-gradient: mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Меняйте две остановки, чтобы изменить размер и мягкость эффекта.
Как сделать тёмную виньетку вместо прозрачной?
Поместите изображение на чёрный фон — маска растворит его в чёрный — или используйте наложение radial-gradient с box-shadow: inset.
Эллипс или круг?
Эллипс повторяет пропорции изображения, поэтому все края затухают равномерно; круг даёт круглое световое пятно в центре.
Можно ли установить CSS-виньетка как веб-приложение и пользоваться им офлайн?
Да. CSS-виньетка — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.