Перейти к содержимому
Aback Tools Logo

Генератор повторяющихся градиентов

Создавайте CSS-узоры с repeating-linear-gradient(), repeating-radial-gradient() и repeating-conic-gradient() - мгновенно и бесплатно. Выберите из 6 встроенных стилей узора (Полосы, Зигзаг, Шахматная доска, Точки, Ромбы или Свой), выберите два цвета, настройте размер узора и смещение плитки и получите готовый к продакшену CSS одним кликом. Полностью приватно и без регистрации.

Repeating Gradient Generator
Build repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() CSS patterns. Choose a pattern style, set colours and pattern size, and copy the CSS instantly.

Pattern Style

Color 1

#6366f1

Color 2

#6366f1

Gradient Type

Pattern Size

50%

Spacing & Offset

0%
0%

Tile Preview (3× tiles)

background: repeating-linear-gradient(to right, #6366f1 0%, #6366f1 40%, #ec4899 40%, #ec4899 100%);

Почему стоит использовать наш генератор повторяющихся градиентов?

  • 6 встроенных стилей узоров: выбирайте из Полос, Зигзага, Шахматной доски, Точек, Ромбов или своих узоров. Каждый стиль автоматически настраивает идеальные позиции цветовых остановок и тип градиента - или переключитесь в режим «Свой» для полного ручного контроля.
  • Живой предпросмотр с мозаикой и мгновенный CSS: генератор обновляет живой предпросмотр и вывод CSS при каждом изменении. Видите точно, как узор повторяется по области предпросмотра, и копируете готовый к продакшену CSS одним кликом.
  • 100 % приватно - без загрузок: вся генерация градиентов происходит локально в вашем браузере. Ваши цвета и узоры не покидают устройство и никогда не отправляются на сервер. Безопасно для клиентских проектов и проприетарных дизайн-систем.
  • Бесплатно и без ограничений: создавайте неограниченное количество повторяющихся градиентов без регистрации, подписки и лимитов. Генератор полностью бесплатен навсегда, без рекламы, блокирующей интерфейс.

Типичные случаи использования повторяющихся градиентов

  • Фоновые узоры для сайтов: веб-дизайнеры используют генератор повторяющихся градиентов для создания бесшовных фоновых узоров для hero-секций, блоков контента и разделителей страниц. Повторяющиеся градиенты загружаются быстрее изображений и идеально масштабируются при любом разрешении.
  • Полосатые таблицы и списки на CSS: фронтенд-разработчики используют repeating-linear-gradient для создания зебра-полос в таблицах, чередующихся фонов списков и узоров таймлайна. Копируйте CSS прямо в свою таблицу стилей одним кликом.
  • Токены узоров для дизайн-систем: команды дизайн-систем используют генератор для определения токенов узоров для декоративных фонов, состояний загрузки и элементов-заглушек. Визуальный конструктор упрощает согласование узоров с фирменными цветами.
  • Графика для соцсетей и маркетинга: маркетологи и создатели контента используют генератор для создания выразительных узорных фонов для постов в соцсетях, инфографики и заголовков писем. Библиотека пресетов даёт мгновенные отправные точки.
  • Декоративные элементы интерфейса: UI-разработчики используют повторяющиеся градиенты для прогресс-баров, спиннеров загрузки, декоративных рамок и фоновых текстур. Радиальные и конические повторяющиеся градиенты добавляют уникальные визуальные эффекты компонентам интерфейса.
  • Дизайн лендингов и CTA: оптимизаторы конверсии используют генератор для создания привлекающих внимание фонов CTA и разделителей секций, которые выделяют страницы, сохраняя быструю загрузку без запросов изображений.

Что такое повторяющийся CSS-градиент?

Повторяющийся CSS-градиент - это градиент, который размножает или повторяет свой узор по элементу с помощью функций repeating-linear-gradient(), repeating-radial-gradient() или repeating-conic-gradient(). В отличие от обычных градиентов, растягивающихся по всему элементу, повторяющиеся градиенты создают узоры, повторяя последовательность цветовых остановок. Наш генератор повторяющихся градиентов визуально строит бесшовные повторяющиеся узоры и выдаёт готовый к продакшену CSS.

Как работает наш генератор повторяющихся градиентов

  1. Выберите стиль узора: выберите из 6 встроенных стилей (Полосы, Зигзаг, Шахматная доска, Точки, Ромбы или Свой) или начните с нуля в режиме «Свой» для полного контроля над каждой цветовой остановкой.
  2. Настройте цвета и размер узора: выберите два цвета с помощью палитры, настройте размер узора (длину повторения) и задайте промежуток и смещение плитки. Живой предпросмотр обновляется мгновенно - без кнопок.
  3. Скопируйте CSS: нажмите «Копировать CSS», чтобы скопировать готовое к продакшену объявление background: в буфер обмена. Вставьте его прямо в свою таблицу стилей.

Повторяющиеся vs неповторяющиеся градиенты

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

Размер узора, промежуток и смещение плитки

Ползунок размера узора контролирует длину одного полного цикла узора в процентах от контейнера. Меньшее значение создаёт больше повторений. Опция «Промежуток» добавляет расстояние между плитками узора для более выраженного мозаичного вида. «Смещение плитки» сдвигает последующие плитки по горизонтали или вертикали, создавая ступенчатые эффекты вроде кирпичной кладки или смещённой шахматной доски. Эти элементы управления дают полную свободу адаптировать повторяющийся узор к вашим точным дизайнерским требованиям.

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

Повторяющийся CSS-градиент - это градиент, который размножает свой узор цветовых остановок по элементу с помощью функций repeating-linear-gradient(), repeating-radial-gradient() или repeating-conic-gradient(). В отличие от обычных градиентов, которые растягиваются один раз по всему элементу, повторяющиеся градиенты создают бесшовные узоры - подобно обоям или плитке. Они полностью задаются в CSS, не требуют файлов изображений и масштабируются бесконечно без пикселизации.

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

Генератор повторяющихся градиентов предлагает 6 стилей узора: Полосы (сплошные чередующиеся полосы в любом направлении), Зигзаг (волновой зигзагообразный узор), Шахматная доска (чередующиеся квадраты), Точки (повторяющиеся радиальные точки), Ромбы (узор из ромбов) и Свой (полный ручной контроль над всеми цветовыми остановками и типами градиента). Каждый стиль автоматически настраивает оптимальные позиции остановок и тип градиента, но вы всегда можете переключиться на «Свой» для полного контроля.

Ползунок размера узора контролирует размер одного полного цикла узора относительно контейнера. Меньший процент создаёт больше повторений на той же площади (более мелкий узор), больший процент создаёт меньше, но крупных повторений (более грубый узор). Например, при 25 % вы увидите 4 повторения в контейнере, при 50 % - 2 повторения, а при 100 % - ровно 1 полный цикл узора.

Да. Вся генерация градиентов выполняется на 100 % на стороне клиента в вашем браузере с помощью JavaScript. Ваш выбор цвета и конфигурации узоров никогда не отправляются на сервер, не сохраняются и никуда не передаются. Генератор повторяющихся градиентов полностью приватен и безопасен для клиентских проектов.

Да. Скопируйте значение градиента (часть внутри объявления background:, без «background:») и используйте в классе произвольного значения Tailwind: bg-[repeating-linear-gradient(to_right,#6366f1_0,#6366f1_40px,#ec4899_40px,#ec4899_80px)]. Замените пробелы на подчёркивания в произвольных значениях Tailwind. Как вариант, добавьте градиент в tailwind.config.js в разделе theme.extend.backgroundImage для повторного использования в проекте.

Повторяющиеся линейные и радиальные градиенты поддерживаются во всех современных браузерах без вендорных префиксов. Повторяющиеся конические градиенты поддерживаются в Chrome 69+, Firefox 83+, Safari 12.1+ и Edge 79+. Для старых браузеров (IE11 и ниже) предусмотрите сплошной цвет как запасной вариант перед объявлением градиента.

Да. Генератор повторяющихся градиентов на 100 % бесплатный: без регистрации, без премиум-функций и без ограничений. Создавайте неограниченное количество повторяющихся градиентов без ограничений и скрытых платежей.