Biblioteca de padrões CSS
Navegue por mais de 55 padrões de fundo CSS puro organizados por categoria - pontos, listras, xadrez, ondas, geométrico, grade, diagonal, bolinhas, trama e zigue-zague. Clique em qualquer padrão para copiar instantaneamente o valor de fundo CSS pronto para uso. Todos os padrões usam apenas propriedades de gradiente CSS - sem imagens, sem arquivos externos, sem necessidade de inscrição.
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
Sobre padrões de plano de fundo CSS
- Os padrões de fundo CSS são texturas decorativas de repetição criadas inteiramente com propriedades de fundo CSS - gradiente linear(), gradiente radial(), gradiente cônico() e variantes de repetição-*. Ao contrário dos padrões baseados em imagem, os padrões CSS não exigem nenhuma solicitação HTTP, são dimensionados infinitamente sem pixelização e podem ser recoloridos instantaneamente alterando alguns valores de cores no CSS.
- Cada padrão nesta biblioteca usa uma ou mais camadas de fundo CSS compostas por gradientes e blocos de fundo de tamanho fixo (background-size). A natureza repetitiva dos planos de fundo CSS significa que um único pequeno bloco é desenhado automaticamente em todo o elemento. Essa técnica mantém o CSS mínimo - a maioria dos padrões é uma única linha de CSS de fundo.
- Cada padrão usa cores CSS nomeadas explicitamente (como #333, #ff6b6b) que você pode pesquisar e substituir para corresponder à paleta de sua marca. Substitua os valores das cores no CSS após a cópia para alterar as cores do padrão instantaneamente. Para uso avançado, substitua cores literais por propriedades personalizadas CSS (var(--color-primary)) para criar padrões temáticos.
- Todos os padrões usam recursos CSS padrão suportados em todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Os padrões de plano de fundo CSS têm custo zero de desempenho em tempo de execução - eles são pintados uma vez pelo compositor do navegador e não consomem memória da GPU além da saída renderizada. Eles funcionam offline, não têm tamanho de pacote e nunca causam mudanças de layout.
Perguntas frequentes
Uma biblioteca de padrões CSS é uma coleção selecionada de padrões de fundo CSS puro – pontos, listras, xadrez, ondas, formas geométricas e muito mais – que você pode navegar, visualizar e copiar com um clique. Ao contrário dos arquivos de imagem, os padrões CSS são apenas de código: eles carregam instantaneamente, são dimensionados infinitamente e podem ser recoloridos editando alguns valores de cores.
Clique no botão “Copiar CSS” em qualquer cartão padrão. A declaração de plano de fundo CSS completa é copiada para sua área de transferência. Cole-o em sua folha de estilo: .my-element { background: radial-gradient(...); }.
Sim - todas as cores são valores hexadecimais explícitos. Substitua qualquer valor de cor pelas cores da sua marca. Para temas avançados, substitua as cores por propriedades personalizadas CSS.
Os padrões CSS não exigem nenhuma solicitação HTTP, têm tamanho de arquivo zero, são dimensionados infinitamente sem pixelização, nunca causam mudanças de layout e podem ser recoloridos instantaneamente - tornando-os superiores aos padrões baseados em imagem na maioria dos casos.
Sim. Use sintaxe de valor arbitrário: bg-[radial-gradient(...)] bg-[length:20px_20px], ou adicione o padrão ao seu tailwind.config.js em theme.extend.backgroundImage.
Sim – CSS suporta múltiplas camadas de fundo separadas por vírgulas. Coloque um padrão sobre um gradiente ou sobre outro padrão.
O valor do tamanho do plano de fundo controla a densidade do padrão. Um tamanho menor produz um padrão mais denso; um tamanho maior torna-o mais espalhado.
Sim. Todos os padrões são código CSS padrão e podem ser usados livremente em projetos pessoais e comerciais sem atribuição.
Absolutamente. O uso do código CSS desta biblioteca em sites comerciais, aplicativos da web, produtos SaaS e projetos de clientes é permitido sem restrições.