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

Какво представлява този инструмент?

CSS може да рисува повтарящи се шарки без никакви файлове с изображения, като използва градиенти — radial-gradient() и linear-gradient() — като background-image, съчетани с background-size, който е по-малък от елемента, за да се повтаря градиентът плочка по плочка. Точките на грах използват repeating radial-gradient, ивиците и шахматните дъски използват повтарящи се или наслоени linear-gradient(), а мрежовите линии използват две припокриващи се linear-gradient() линии.

Този инструмент изгражда тези декларации за градиент вместо вас. Изберете тип шарка, настройте цвета на шарката, фоновия цвят и разстоянието, и наблюдавайте как живият преглед се обновява — след което копирайте точния CSS код за background-image и background-size.

Източник: CSS Images Module Level 3, W3C — дефинира repeating-linear-gradient() и repeating-radial-gradient(), функциите, от които са изградени тези шарки.

Защо да го използвате?

• Без файлове с изображения, без HTTP заявки — шарката е чист CSS и се изобразява мигновено при всяка резолюция, включително retina/висок DPI екрани.
• Напълно настройваем цвят и разстояние без ръчно писане на синтаксис за градиент или изчисляване на математика за плочки.
• Живият преглед показва точната повтаряща се шарка, преди да копирате каквото и да е.
• Мащабира се чисто, тъй като е векторна математика, а не растерово изображение — без замъгляване при преоразмеряване на елемента.
• Работи изцяло във вашия браузър — нищо, което конфигурирате, не се качва никъде.
• Безплатно, без регистрация, работи на мобилни устройства.

Как да го използвате

1. Изберете тип шарка: точки на грах, диагонални ивици, шахматна дъска или мрежови линии.
2. Изберете цвета на шарката и фоновия цвят, който се показва между/зад формите на шарката.
3. Настройте плъзгача за размер, за да направите точките, ивиците или клетките на мрежата по-големи или по-малки — това също контролира колко гъсто се повтаря шарката.
4. Копирайте генерирания CSS код и го поставете като background-image (и background-size/background-position, където е показано) на всеки елемент.

Пример

Вход

Шарка: точки на грах · Цвят: синьо · Фон: бяло · Размер: 24px

Резултат

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Класическа светла шарка с точки на грах, често използвана като деликатен фон на секция или текстура на карта.

Как е изградена всяка шарка

• Точки на грах: radial-gradient() рисува едно малко запълнено кръгче, а background-size го повтаря като подредена мрежа от точки.
• Диагонални ивици: repeating-linear-gradient() под ъгъл 45 градуса редува цвета на шарката и фоновия цвят през фиксиран интервал.
• Шахматна дъска: два припокриващи се слоя linear-gradient() под 45 градуса, изместени един спрямо друг с половин плочка, произвеждат редуващи се светли/тъмни квадрати.
• Мрежови линии: две тънки linear-gradient() линии — една хоризонтална, една вертикална — подредени плочка по плочка на избраното разстояние, за да образуват мрежа, подобна на карирана хартия.

Кога да използвате CSS шарки вместо файлове с изображения

CSS градиентна шарка няма размер на файл и не изисква HTTP заявка, затова се зарежда мигновено и никога не изглежда замъглена на екрани с висок DPI, за разлика от растерова PNG фонова плочка. Идеална е за деликатни текстури зад текст, разделители на секции, илюстрации за празни състояния или заместващи карти. За сложни илюстрирани или фотографски шарки истинското изображение все още е правилният инструмент — CSS градиентите са най-подходящи за прости, геометрични, повтарящи се форми като тези тук.

Комбиниране с други CSS ефекти

Шарките работят добре като фон зад глазморфни карти, тъй като размазването се нуждае от нещо с визуална текстура зад него, за да бъде видимо. Те също така се съчетават естествено със заоблени ъгли на елемента контейнер.

→ CSS Glassmorphism Generator · Border Radius Generator

Често задавани въпроси