Библиотека шаблонов CSS
Просмотрите более 55 фоновых узоров, созданных на чистом CSS, сгруппированных по категориям: точки, полосы, клетки, волны, геометрические фигуры, сетка, диагональ, горошек, плетение и зигзаг. Щелкните любой шаблон, чтобы мгновенно скопировать готовое к использованию значение фона CSS. Все шаблоны используют только свойства градиента CSS — никаких изображений, внешних файлов и регистрации.
Showing 55 of 55 patterns
Polka Dots
Classic evenly-spaced polka dot pattern
Large Dots
Big polka dots for playful backgrounds
Tiny Dots
Subtle micro-dot texture
Offset Dots
Dots arranged in staggered grid
Colored Dots
Playful multi-tone dot pattern
Dot Grid
Precise dot grid for technical layouts
Horizontal Stripes
Classic horizontal pinstripe pattern
Vertical Stripes
Clean vertical stripe pattern
Thick Stripes
Bold wide stripe pattern
Colorful Stripes
Rainbow multi-color stripe pattern
Candy Stripes
Alternating thin candy-colored stripes
Barber Pole
Classic barber shop diagonal stripe
Subtle Stripes
Very subtle light stripe for minimal backgrounds
Slim Stripes
Ultra-thin vertical pinstripes
Checkerboard
Classic black and white checkerboard
Small Check
Tight checkerboard pattern
Gingham
Soft gingham picnic pattern
Blue Gingham
Classic blue gingham pattern
Graph Paper
Engineering graph paper grid
Blueprint Grid
Blue grid reminiscent of blueprints
Sine Wave
Smooth undulating wave pattern
Ocean Waves
Layered ocean-inspired wave pattern
Ripple
Concentric ripple effect
Sound Wave
Audio spectrum visualizer pattern
Hexagons
Honeycomb hexagonal tessellation
Triangles
Repeating triangle pattern
Diamonds
Diamond tessellation pattern
Circles
Overlapping circle pattern
Arrows
Directional arrow pattern
Zigzag Top
Zigzag border pattern that repeats
Fine Grid
Tight grid for technical backgrounds
Dot Grid
Grid made of dots at intersections
Major/Minor Grid
Grid with major and minor lines
Isometric Grid
Isometric/perspective grid pattern
Diagonal Stripes
Clean diagonal stripe pattern
Reverse Diagonal
Opposite angle diagonal stripes
Crosshatch
Crosshatch/checkered diagonal pattern
Hatching
Fine art hatching pattern
Bold Diagonal
Thick bold diagonal stripes
Colored Diagonals
Multi-color diagonal pattern
Confetti
Celebratory confetti pattern
Stars
Tiny star-like pattern
Leopard Spots
Organic spotted pattern
Basket Weave
Woven basket texture
Herringbone
Classic herringbone pattern
Waffle
Waffle/woven texture
Brick
Brick wall pattern
Zigzag Wave
Sharp zigzag wave pattern
Lightning Bolt
Sharp angular zigzag like lightning
Sawtooth
Sawtooth edge pattern
Maze
Intricate maze-like pattern
Retro Diamond
Retro 70s diamond pattern
Fishtail
Fishtail/scallop pattern
Bubbles
Bubbly circle pattern
Concentric Squares
Concentric square pattern
О фоновых шаблонах CSS
- Фоновые шаблоны CSS — это декоративные повторяющиеся текстуры, полностью созданные с помощью свойств фона CSS — линейных градиентов(), радиальных градиентов(), конических градиентов() и вариантов повторяющихся*. В отличие от шаблонов на основе изображений, шаблоны CSS не требуют HTTP-запросов, бесконечно масштабируются без пикселизации и могут быть мгновенно перекрашены путем изменения нескольких значений цвета в CSS.
- Каждый шаблон в этой библиотеке использует один или несколько фоновых слоев CSS, состоящих из градиентов и фоновых плиток фиксированного размера (background-size). Повторяющийся характер фонов CSS означает, что одна маленькая плитка автоматически рисуется по всему элементу. Этот метод позволяет минимизировать использование CSS — большинство шаблонов представляют собой одну строку фонового CSS.
- В каждом шаблоне используются явно названные цвета CSS (например, #333, #ff6b6b), которые вы можете искать и заменять в соответствии с палитрой вашего бренда. Замените значения цветов в CSS после копирования, чтобы мгновенно изменить цвета узора. Для расширенного использования замените буквальные цвета настраиваемыми свойствами CSS (var(--color-primary)), чтобы создать шаблоны с возможностью оформления тем.
- Во всех шаблонах используются стандартные функции CSS, поддерживаемые во всех современных браузерах (Chrome, Firefox, Safari, Edge). Фоновые шаблоны CSS не требуют затрат производительности во время выполнения — они рисуются компоновщиком браузера один раз и не потребляют никакой памяти графического процессора, кроме визуализированного вывода. Они работают в автономном режиме, не имеют размера пакета и никогда не вызывают изменений в макете.
Часто задаваемые вопросы
Библиотека шаблонов CSS — это тщательно подобранная коллекция фоновых шаблонов, созданных на чистом CSS — точек, полос, клеток, волн, геометрических фигур и т. д. — которые вы можете просматривать, просматривать и копировать одним щелчком мыши. В отличие от файлов изображений, шаблоны CSS предназначены только для кода: они загружаются мгновенно, бесконечно масштабируются и могут быть перекрашены путем редактирования нескольких значений цвета.
Нажмите кнопку «Копировать CSS» на любой карточке шаблона. Полное объявление фона CSS будет скопировано в буфер обмена. Вставьте его в свою таблицу стилей: .my-element {background: radius-gradient(...); }.
Да, все цвета являются явными шестнадцатеричными значениями. Замените любое значение цвета цветами вашего бренда. Для расширенной тематики замените цвета настраиваемыми свойствами CSS.
Шаблоны CSS не требуют HTTP-запросов, имеют нулевой размер файла, бесконечно масштабируются без пикселизации, никогда не вызывают сдвигов макета и могут быть мгновенно перекрашены, что в большинстве случаев делает их превосходящими шаблоны на основе изображений.
Да. Используйте синтаксис произвольного значения: bg-[radial-gradient(...)] bg-[length:20px_20px] или добавьте шаблон в файл Tailwind.config.js в разделе theme.extend.backgroundImage.
Да. CSS поддерживает несколько фоновых слоев, разделенных запятыми. Наложите узор поверх градиента или другого узора.
Значение размера фона управляет плотностью узора. Меньший размер дает более плотный рисунок; больший размер делает его более разбросанным.
Да. Все шаблоны представляют собой стандартный код CSS и могут свободно использоваться в личных и коммерческих проектах без указания авторства.
Абсолютно. Использование CSS-кода из этой библиотеки на коммерческих веб-сайтах, веб-приложениях, продуктах SaaS и клиентских проектах разрешено без ограничений.