На главную
CSS-эффекты и графика
Шум и зерно
Плёночное зерно поверх любого блока одной строкой CSS. Картинка не скачивается: шум рисует сам браузер фильтром feTurbulence.
Зерно
Меньше значение — крупнее зерно. 0,7–0,9 похоже на плёнку, выше 1,5 — на цифровой шум матрицы.
Превью
Без зерна
С зерном
Одна строка: фон блока
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='300' height='300'%3E %3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.35'/%3E %3C/svg%3E");Зерно поверх содержимого (::after)
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='300' height='300'%3E %3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.35'/%3E %3C/svg%3E");
mix-blend-mode: overlay;
}Сам SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300"> <filter id="noise" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter> <rect width="100%" height="100%" filter="url(#noise)" opacity="0.35"/> </svg>