Генератор CSS-паттернов

Q: Можно ли использовать прозрачный фон?

Да, введите в качестве цвета фона `transparent` или цвет rgba()/oklch() с альфа-каналом.

Создавайте фоновые CSS-паттерны без картинок: точки, горох, полосы, шахматка, сетка, зигзаг и штриховка. Цвета, размер плитки и толщина линий.

Настройки узора

Узор

Цвет узора

Цвет фона

Размер плиткиpx

Радиус точкиpx

Предпросмотр

CSS-код

background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

Что такое Генератор CSS-паттернов?

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

Как пользоваться Генератор CSS-паттернов

Выберите паттерн: Dots, Polka dots, Stripes, Checkerboard, Grid, Zigzag или Crosshatch grid.
Задайте цвет паттерна и цвет фона.
Настройте размер плитки и толщину (радиус точки, ширину полосы или линии), а для полос ещё и угол.
Проверьте предпросмотр.
Скопируйте CSS-код.

Пример

Ввод

Checkerboard, tile 40px, pattern #000000 on #ffffff

Вывод

background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

Когда использовать Генератор CSS-паттернов

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

Как работает Генератор CSS-паттернов

Каждый паттерн это background-color плюс один или несколько градиентов, повторяемых через background-size. Точки используют radial-gradient(color r, transparent r); горох добавляет второй смещённый слой через background-position. Полосы используют repeating-linear-gradient с жёсткими остановками цвета; шахматка использует repeating-conic-gradient(color 0% 25%, transparent 0% 50%); сетки объединяют горизонтальный и вертикальный линейные градиенты; зигзаг строится из четырёх треугольников под 45°. Толщина ограничена размером плитки.