Генератор фонових CSS-візерунків

Більшість «генераторів візерунків» тихенько перевикористовують ту саму формулу repeating-linear-gradient для кожного варіанта, просто змінюючи числа. Цей — ні: кожен із шести типів візерунків тут побудований на конкретній CSS-техніці, яка реально дає таку форму. Смуги використовують один repeating-linear-gradient із двома кольоровими смугами. Крапки використовують один radial-gradient, тайлований виключно через background-size — класичний трюк CSS-крапок — а не repeating-radial-gradient, який не може чисто тайлувати кругову крапку на прямокутній сітці. Шахівниця використовує справжню чотирьохквадрантну формулу conic-gradient: конічний градієнт, відцентрований у квадратному тайлі, природно розбивається на чотири квадрантні квадрати межами по 90 градусів, і чергування двох кольорів по цих квадрантах дає справжню шахівницю, а не наближення.

Сітка й діагональна штрихівка обидві накладають два repeating-linear-gradient як окремі записи background-image, а не імітують другий напрямок трюками з бордюрами. Сітка поєднує повторюваний градієнт «to right» і «to bottom» для чітких горизонтальних і вертикальних ліній. Штрихівка накладає повторюваний градієнт +45deg і -45deg для діагонального плетення в стилі кошика — тут варто бути точним: це чесна штрихівка (crosshatch), а не справжня геометрія ялинки (herringbone), і інструмент так її й називає, не перебільшуючи. Трикутники перевикористовують ту саму чотирисегментну техніку conic-gradient, що й шахівниця, але починають градієнт із поворотом на 45 градусів, що зсуває межі сегментів із середин країв тайла в його кути й перетворює ті самі чотири сегменти на чотири трикутники «кут-до-кута» замість чотирьох квадрантних квадратів.

Кожен тип візерунка показує лише ті контроли, які до нього справді застосовні — повзунок кута зʼявляється для смуг, радіус і крок крапок — для крапок, товщина лінії — для сітки й штрихування — а велика тайлована область превʼю перемальовується при кожній зміні, тож видно кілька повних повторів ще до фіксації значення. Перемкніть режим виводу на SVG, і той самий візерунок зʼявиться як елемент <pattern>, побудований із простих примітивів rect, circle, path чи polygon, готовий для вставки в <defs> будь-якого SVG-документа, з завантаженням окремого файлу .svg в один клік.

Усе працює локально у вашому браузері: без завантаження зображень, без звернень до сервера, без акаунта. Для суцільних заливок чи градієнтів без повторення на цьому сайті є генератор CSS-градієнтів; цей інструмент — саме для фонових геометричних візерунків, що тайляться, побудованих без жодного зображення.