#CSS

🔖 Зернистые градиенты в CSS — тренд, который покорил дизайнеров

Если листали Dribbble или Behance, наверняка видели эти крутые текстурные градиенты с зернистостью. Дизайнеры их обожают — они добавляют реализма и глубины любому интерфейсу. Раньше такое делали только в Фотошопе, но теперь можно прямо в CSS!

Секрет техники: комбинируем SVG-фильтры с CSS-градиентами. SVG создает шум Перлина, CSS накладывает его на градиент, а фильтры яркости превращают всё это в магию.


Пошаговый код:

1️⃣SVG-фильтр для шума:

<svg xmlns='http://www.w3.org/2000/svg'>
  <filter id='noise'>
    <feTurbulence type='fractalNoise' 
                  baseFrequency='0.65' 
                  numOctaves='3'/>
  </filter>
  <rect width='100%' height='100%' 
        filter='url(#noise)'/>
</svg>

2️⃣Накладываем на градиент:

.grainy-gradient {
  background: 
    linear-gradient(45deg, #ff6b6b, transparent),
    url('noise.svg');
  filter: contrast(170%) brightness(1000%);
}

3️⃣Смешиваем цвета (опционально):

.overlay {
  background: #4ecdc4;
  mix-blend-mode: multiply;
}

Где использовать:
• Hero-секции с вау-эффектом
• Карточки товаров и услуг
• Стильные кнопки и тени
• Фоны для креативных проектов
• Голографические эффекты

Техника работает во всех современных браузерах. Особенно круто выглядит на ретина-дисплеях — зерно получается естественным и живым, как настоящая текстура.

Лайфхак: меняйте baseFrequency от 0.1 до 1 для разной грубости зерна, экспериментируйте с цветами градиента и значениями контрастности. Каждая комбинация даёт уникальный результат!


📎 Статья

🎙 Новости

📝 База вопросов