Генератор фоновых узоров на CSS
Выберите узор, два цвета и размер и скопируйте фон, собранный только из CSS-градиентов. Никаких файлов с картинками — узор загружается мгновенно, остаётся чётким при любом масштабе и легко меняется потом.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Выберите узор.
- Задайте цвета узора и фона, размер и, для полосок, угол.
- Скопируйте CSS и добавьте его любому элементу, например секции или body.
Как это работает
- Полоски:
repeating-linear-gradient, где цвет идёт от 0 до ширины полосы, а дальше до конца периода — прозрачность.
- Шахматная клетка: один
conic-gradient закрашивает две противоположные четверти плитки со стороной в два размера клетки.
- Горошек: маленький круг из
radial-gradient, повторённый через background-size.
- Сетка и диагональная сетка: два градиента тонких линий, пересекающихся под прямым углом.
- Зигзаг: четыре треугольника из линейных градиентов с шагом 45°, два из них сдвинуты на половину плитки.
Пример
Диагональные полоски по умолчанию с размером 24 px и толщиной 50 % дают:
background-color: #eff6ff;
background-image: repeating-linear-gradient(45deg, #3b82f6 0 12px, transparent 12px 24px);
Советы
- Кнопка Поменять цвета местами быстро покажет инвертированный вариант.
- Для едва заметной фактуры берите цвет узора чуть темнее фона.
- Полоски под углом, отличным от 0° и 90°, при малом размере могут давать зубчатые края; на крупном размере они глаже.
Частые вопросы
Как CSS рисует узор без картинок?
Градиент может менять цвет резко — две цветовые точки в одной позиции дают чёткую границу, — а background-size повторяет маленькую плитку по всему элементу. Так строятся полоски, горошек, клетка и линии.
Что означает ползунок размера для каждого узора?
Это шаг повторения — период полос, сторона одной клетки шахматки, расстояние между точками, ячейка сетки и ширина зигзага. Ползунок толщины задаёт ширину полосы или диаметр точки как долю этого размера, а линии сетки получают пятую часть от неё.
Работают ли такие узоры во всех браузерах?
В них используются linear, repeating-linear, radial и conic-градиенты. Все современные браузеры их поддерживают; для conic-градиентов, из которых сделана шахматная клетка, нужен браузер 2020 года или новее.
Можно ли положить узор под текст?
Да, но пёстрый узор мешает читать. Берите близкие цвета, крупный размер или сплошную подложку под текстом.