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

Что это за инструмент?

CSS умеет рисовать повторяющиеся узоры без файлов изображений, используя градиенты — radial-gradient() и linear-gradient() — в качестве background-image в сочетании с background-size меньше самого элемента, так что градиент выкладывается плиткой и повторяется. Горошек использует повторяющийся radial-gradient, полосы и шахматка — повторяющийся или наложенный linear-gradient(), а линии сетки — две пересекающиеся линии linear-gradient().

Этот инструмент строит эти объявления градиентов за вас. Выберите тип узора, настройте цвет узора, цвет фона и интервал, наблюдая за обновлением живого предпросмотра, — затем скопируйте точный CSS-код background-image и background-size.

Источник: CSS Images Module Level 3, W3C — определяет repeating-linear-gradient() и repeating-radial-gradient(), функции, на которых построены эти узоры.

Зачем его использовать?

• Никаких файлов изображений и HTTP-запросов — узор представляет собой чистый CSS и мгновенно отрисовывается при любом разрешении, включая retina/экраны с высокой плотностью пикселей.
• Полностью настраиваемые цвет и интервал без необходимости вручную писать синтаксис градиента или рассчитывать математику для плитки.
• Живой предпросмотр показывает точный повторяющийся узор ещё до того, как вы что-либо скопируете.
• Масштабируется без искажений, поскольку это векторная математика, а не растровое изображение — без размытия при изменении размера элемента.
• Работает полностью в вашем браузере — ничего из настроенного никуда не загружается.
• Бесплатно, без регистрации, работает на мобильных.

Как использовать

1. Выберите тип узора: горошек, диагональные полосы, шахматный узор или линии сетки.
2. Выберите цвет узора и цвет фона, который виден между фигурами узора или позади них.
3. Настройте ползунок размера, чтобы сделать точки, полосы или ячейки сетки крупнее или мельче — это также определяет, насколько плотно повторяется узор.
4. Скопируйте сгенерированный CSS и вставьте его как background-image (а также background-size/background-position, где они указаны) любого элемента.

Пример

Ввод

Узор: горошек · Цвет: синий · Фон: белый · Размер: 24px

Результат

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Классический светлый узор в горошек, часто используемый как ненавязчивый фон секции или текстура карточки.

Как устроен каждый узор

• Горошек: radial-gradient() рисует один небольшой закрашенный круг, а затем background-size заставляет его повторяться как выложенная плиткой сетка точек.
• Диагональные полосы: repeating-linear-gradient() под углом 45 градусов чередует цвет узора и цвет фона с фиксированным интервалом.
• Шахматка: два наложенных друг на друга слоя linear-gradient() под углом 45 градусов, смещённые друг относительно друга на половину плитки, создают чередующиеся светлые и тёмные квадраты.
• Линии сетки: две тонкие линии linear-gradient() — горизонтальная и вертикальная — выложенные плиткой с выбранным интервалом, образуют сетку, похожую на миллиметровую бумагу.

Когда использовать CSS-узоры вместо файлов изображений

CSS-градиентный узор не имеет размера файла и не требует HTTP-запроса, поэтому загружается мгновенно и никогда не выглядит размытым на экранах с высокой плотностью пикселей, в отличие от растровой PNG-плитки для фона. Он идеально подходит для ненавязчивых текстур позади текста, разделителей секций, иллюстраций пустых состояний или карточек-заглушек. Для сложных иллюстративных или фотографических узоров подходящим инструментом по-прежнему остаётся настоящее изображение — CSS-градиенты лучше всего подходят для простых, геометрических, повторяющихся форм, подобных тем, что представлены здесь.

Сочетание с другими CSS-эффектами

Узоры хорошо смотрятся как фон позади карточек с глассморфизмом, поскольку для размытия нужно что-то с визуальной текстурой позади. Они также естественно сочетаются со скруглёнными углами контейнера.

→ Генератор глассморфизма CSS · Генератор border-radius

Часто задаваемые вопросы