Перейти к основному содержанию
iotools.cloudiotools.cloud

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

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

Ввод

Цвета

Установите на 10-20% для тонкой текстуры за текстом.

Геометрия

Размер одного повторяющегося блока в пикселах.

Толщина линий или радиус точек.

Вывод

Созданное правило ограничено этим классом, поэтому не будет конфликтовать с вашими собственными стилями.

Вывод

Ваш паттерн появится здесь.

Реально созданный CSS, отрисованный в изолированном Shadow DOM — ровно то, что вы копируете.

CSS
Фрагмент HTML

Встроенная min-height нужна только для размера пустого демо-блока — удалите её в своём макете.

Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-background-pattern-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "pattern": "dots",
    "color": "#6366f1",
    "bgColor": "#ffffff",
    "opacity": "100",
    "size": "32",
    "weight": "3",
    "className": "io-pattern"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-background-pattern-generator` tool (CSS Background Pattern Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-background-pattern-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор паттернов фонов CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

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

Всё выполняется в вашем браузере — ничто из того, что вы вводите, не загружается куда-либо.

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

  1. Выберите паттерн. Доступно пятнадцать семейств: горошек, смещённые точки, сетка, миллиметровка, горизонтальные/вертикальные/диагональные полосы, перекрёстная штриховка, изометрические линии, шахматная доска, ромбы, треугольники, зигзаг, волны и 3D кубы.
  2. Установите цвета. "Цвет паттерна" рисует фигуры, "Цвет фона" заполняет их позади.
  3. Отрегулируйте геометрию. Размер паттерна — это ширина одного повторяющегося блока в пикселах; Толщина линий — это насколько толстые линии (или насколько большие точки). Толщина линий скрывается для паттернов, чья геометрия чисто пропорциональна — шахматная доска не имеет линии для утолщения.
  4. Уменьшите прозрачность. Это параметр, который нужен большинству людей, но отсутствует в большинстве генераторов. При 100% паттерн конкурирует с вашим контентом; при 10–20% он читается как текстура.
  5. Скопируйте CSS и вставьте его в вашу таблицу стилей. Фрагмент HTML рядом показывает разметку, которую ожидает правило.

Параметры

  • Паттерн — семейство геометрии. Каждый — это чистый background-image, созданный из linear-gradient, repeating-linear-gradient или radial-gradient.
  • Цвет паттерна / Цвет фона — шестнадцатеричные значения. background-color находится под слоями градиента, поэтому цвет паттерна — это то, что вы видите сверху.
  • Прозрачность паттерна — ниже 100% цвет паттерна выводится как rgba(), чтобы фон проглядывал через него.
  • Размер паттерна — от 4px до 160px. Малые значения дают тонкую текстуру, большие значения дают смелые графические блоки.
  • Толщина линий — ограничена половиной размера блока, потому что линия толще этого заполнит блок сплошным чёрным цветом.
  • Имя класса — правило ограничено этим классом, поэтому не может конфликтовать ни с чем в вашей таблице стилей.

Почему CSS имеет несколько слоёв background-image?

Большинство этих паттернов не могут быть нарисованы одним градиентом. Сетка — это семейство вертикальных линий плюс горизонтальная; шахматная доска — это два смещённых диагональных градиента; изометрические кубы нуждаются в шести слоях, чтобы дать каждой грани другой оттенок. CSS рисует их в написанном порядке, первый слой сверху, и background-size / background-position выравниваются с этими слоями один в один. Выглядит многословно, но это одно свойство — вы можете безопасно вставить весь блок как есть.

Почему background-size отсутствует на паттернах полос?

Семейства полос, перекрёстной штриховки и изометрического используют repeating-linear-gradient, которая несёт свой собственный период повторения в остановках градиента. Добавление background-size там ничего не изменит, поэтому инструмент его не выводит.

Будут ли эти паттерны работать в старых браузерах?

Каждый паттерн использует CSS градиенты, поддерживаемые везде с примерно 2012 года. Семейства полос используют остановки цветов с несколькими позициями (color 0 6px), для которых нужен браузер от 2019 года или позже — все текущие версии Chrome, Firefox, Safari и Edge их поддерживают.

Что если я хочу паттерн за текстом?

Установите прозрачность на 10–20% и выберите небольшой размер паттерна. Загруженный паттерн на полную силу делает основной текст сложным для чтения; тот же паттерн на 15% читается как текстура бумаги и не мешает.

Связанные инструменты

Нужен градиент вместо паттерна? Генератор градиентов CSS создаёт линейные и радиальные градиенты визуально. Для повторяющейся фигуры, выводимой как реальный файл SVG вместо CSS, используйте Генератор паттернов SVG, а для мягкого размытого фона используйте Генератор Aurora Blob CSS.

cssbackgroundpatterncss patternbackground patternrepeating backgroundseamlessdotsstripesgridweb design

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу