Генератор на CSS шаблонни фонове

Повечето инструменти за генериране на шаблони тихомълком преизползват една и съща формула с повтарящ се линеен градиент за всяка опция и просто сменят числата. Този не прави така: всеки от шестте типа шаблони тук е изграден с конкретната CSS техника, която действително създава тази форма. Райетата използват единичен повтарящ се линеен градиент с две цветни ивици. Точките използват един radial-gradient, плочкован единствено чрез background-size – класическият трик с CSS точки – вместо повтарящ се радиален градиент, който не може да плочкува кръгла точка чисто върху правоъгълна мрежа. Шахматната дъска използва истинската четириквадрантна формула с conic-gradient: коничен градиент, центриран в квадратна плочка, естествено се разделя на четири квадрантни квадрата при 90-градусови граници, а редуването на два цвята през тези квадранти се плочкува в истинска шахматна дъска, не в приближение.

Мрежата и диагоналното кръстосване наслояват по два повтарящи се линейни градиента като отделни записи в background-image, вместо да симулират втората посока с трикове с рамки. Мрежата комбинира повтарящ се градиент „надясно“ и „надолу“ за остри хоризонтални и вертикални линии на ска̀лата. Кръстосването наслоява повтарящ се градиент под +45° и -45° за плетеница с диагонална сплитка – струва си да сме точни: това е честно кръстосване, а не истинска геометрия на рибена кост, и инструментът го обозначава така, вместо да претендира за повече. Триъгълниците преизползват техниката с четириклиновия коничен градиент на шахматната дъска, но започват градиента завъртян на 45 градуса, което измества границите на клиновете от средните точки на ръбовете на плочката към ъглите ѝ и превръща същите четири клина в четири триъгълника от ъгъл до ъгъл вместо в четири квадрантни квадрата.

Всеки тип шаблон показва само контролите, които действително се отнасят до него – плъзгач за ъгъл се появява за райета, радиус на точките и разстояние за точки, дебелина на линията за мрежа и кръстосване – а голямото поле за плочков преглед се прерисува при всяка промяна, така че да видите няколко пълни повторения, преди да фиксирате стойност. Превключете изходния режим на SVG и същият шаблон се появява отново като <pattern> елемент, изграден от обикновени примитиви rect, circle, path или polygon, готов за поставяне в <defs> на всеки SVG документ, с изтегляне с едно кликване за самостоятелен .svg файл.

Всичко работи локално във вашия браузър: без качване на изображения, без обратно обръщение към сървър, без регистрация. За плътни или градиентни запълвания без повторение, генераторът на CSS градиенти на този сайт е подходящият инструмент; този е специално за плочкови геометрични фонове, изградени от нула графични активи.