Генератор фоновых узоров

Чистый CSS, никаких файлов изображений

Каждый узор рисуется CSS-градиентами поверх сплошного background-color. Отдельное фоновое изображение не нужно размещать на сервере или загружать. Например, узор из точек выглядит так:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

По умолчанию фон CSS повторяется. Созданные значения размера и позиции выравнивают слои при повторении, но масштаб страницы и дробные пиксели устройства могут немного изменить вид края. Меняйте интервал, чтобы сделать текстуру плотнее или свободнее.

Из чего состоит каждый мотив

Советы по цвету и контрасту

• Для фона выбирайте невысокий контраст. Близкий к фону цвет узора обычно выглядит сдержанно, а сильный контраст может отвлекать от содержимого страницы.
• Подстройте под бренд. Используйте цвет бренда в качестве цвета узора вместо простого серого, чтобы текстура перекликалась с вашей айдентикой.
• Тёмный режим. Попробуйте тёмный фон и немного более светлый узор. Сильный контраст может выглядеть шумно на большой тёмной поверхности.
• Проверяйте текст на обоих цветах. Если текст расположен поверх узора, проверьте контраст цвета текста и с фоном, и с цветом узора везде, где они могут оказаться под символами. Генератор показывает узор, но не проводит проверку контраста по WCAG.

Где это использовать

• Фоны главных блоков и секций, которым нужна лёгкая текстура без изображения.
• Карточки и панели в дашборде, где слабая сетка или точки добавляют структуру.
• Пустые состояния и заглушки, где шахматная доска воспринимается нейтрально.
• Печатные макеты и слайды, которым нужно ощущение миллиметровки или штриховки.

Поскольку узор задан CSS, а не отдельным фоновым файлом, он не добавляет запрос изображения. Значения градиента, размера и позиции можно позже изменить в инструментах разработчика браузера.