Фон из CSS-стилей

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

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

Доступно пять типов шаблонов: Точки (повторяющийся узор из кругов с использованием radial-gradient), Сетка (перекрёстная сетка с использованием двух слоёв linear-gradient), Диагональ (диагональные линии под 45 градусов с использованием repeating-linear-gradient), Зигзаг (зигзагообразный узор с использованием четырёх слоёв linear-gradient) и Волны (волнистый узор с использованием смещённых кругов radial-gradient).

Используйте средство выбора цвета переднего плана для установки цвета линий или точек шаблона и средство выбора цвета фона для базового цвета за шаблоном. Ползунок размера управляет интервалом повторения шаблона — меньшие значения создают более плотные узоры, а большие значения дают более разреженные дизайны. Экспериментируйте с различными цветовыми комбинациями и размерами.

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