Дизайн / CSS

Генератор паттернов CSS (полосы, точки, сетка, шахматный узор)

Создавайте повторяющиеся фоновые узоры только с помощью градиентов CSS: полосы, диагональные полосы, линии сетки, горошек, шахматный узор и зигзаг — с собственными двумя цветами, размером и толщиной линий. Затем скопируйте CSS.

Генератор паттернов CSS (полосы, точки, сетка, шахматный узор): Каждый узор состоит из одного или двух повторяющихся градиентов CSS с выбранным размером: repeating-linear-gradient для полос, двух пересекающихся линейных градиентов для сетки, radial-gradient для точек и repeating-conic-gradient для шахматного узора. Файл изображения не создаётся, поэтому узор остаётся чётким при любом масштабе и не требует загрузки. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Генератор узоров CSSЛокальная обработка

Полностью работает в браузере

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

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

Как рисуется шахматный узор

repeating-conic-gradient(#000 0 25%, transparent 0 50%) закрашивает первую и третью четверти оборота вокруг центра каждой плитки, создавая по два диагональных квадрата на плитку; background-size задаёт размер плитки, вдвое превышающий размер квадрата.

Объединение узоров

Фоновые изображения накладываются друг на друга: укажите градиент из генератора градиентов CSS после узора, разделив их запятой, и узор окажется поверх градиента.

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

  1. Выберите узор.
  2. Задайте два цвета, размер повтора и толщину линий или размер точек.
  3. Скопируйте CSS.

Конфиденциальность и ограничения

Всё работает в вашем браузере.

Похожие инструменты

CSS-градиентSVG-волнаСтекломорфизм

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

Работают ли узоры во всех браузерах?

Да: все современные браузеры поддерживают эти градиенты, включая конический градиент, используемый для шахматного узора.

Как разместить узор за текстом?

Выберите два близких оттенка, чтобы узор оставался ненавязчивым, а текст сохранял достаточный контраст.

Можно ли изменить угол наклона полос?

Да: измените угол в repeating-linear-gradient в скопированном CSS, например укажите 60deg вместо 45deg.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен