Biblioteca de patrones CSS
Explore más de 55 patrones de fondo CSS puro organizados por categoría: puntos, rayas, cuadros, ondas, geométricos, cuadrículas, diagonales, lunares, tejidos y zigzag. Haga clic en cualquier patrón para copiar instantáneamente el valor de fondo CSS listo para usar. Todos los patrones utilizan únicamente propiedades de degradado CSS: sin imágenes, sin archivos externos, no es necesario registrarse.
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
Acerca de los patrones de fondo CSS
- Los patrones de fondo CSS son texturas decorativas repetidas creadas completamente con propiedades de fondo CSS: variantes de gradiente lineal(), gradiente radial(), gradiente cónico() y repetición-*. A diferencia de los patrones basados en imágenes, los patrones CSS no requieren solicitudes HTTP, se escalan infinitamente sin pixelación y se pueden volver a colorear instantáneamente cambiando algunos valores de color en el CSS.
- Cada patrón de esta biblioteca utiliza una o más capas de fondo CSS compuestas con degradados y mosaicos de fondo de tamaño fijo (tamaño de fondo). La naturaleza repetitiva de los fondos CSS significa que se dibuja automáticamente un único mosaico pequeño en todo el elemento. Esta técnica mantiene el CSS mínimo: la mayoría de los patrones son una sola línea de CSS de fondo.
- Cada patrón utiliza colores CSS con nombres explícitos (como #333, #ff6b6b) que puedes buscar y reemplazar para que coincidan con la paleta de tu marca. Reemplace los valores de color en el CSS después de copiarlos para cambiar los colores del patrón al instante. Para uso avanzado, reemplace los colores literales con propiedades personalizadas de CSS (var(--color-primary)) para crear patrones temáticos.
- Todos los patrones utilizan funciones CSS estándar compatibles con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Los patrones de fondo CSS no tienen costo de rendimiento en tiempo de ejecución: el compositor del navegador los pinta una vez y no consumen memoria de GPU más allá de la salida renderizada. Funcionan sin conexión, no tienen tamaño de paquete y nunca provocan cambios de diseño.
Preguntas frecuentes
Una biblioteca de patrones CSS es una colección seleccionada de patrones de fondo CSS puro (puntos, rayas, cuadros, ondas, formas geométricas y más) que puede explorar, obtener una vista previa y copiar con un solo clic. A diferencia de los archivos de imagen, los patrones CSS son sólo código: se cargan instantáneamente, se escalan infinitamente y se pueden cambiar de color editando algunos valores de color.
Haga clic en el botón "Copiar CSS" en cualquier tarjeta de patrón. La declaración de fondo CSS completa se copia en su portapapeles. Pégalo en tu hoja de estilo: .my-element { background: radial-gradient(...); }.
Sí, todos los colores son valores hexadecimales explícitos. Reemplace cualquier valor de color con los colores de su marca. Para temas avanzados, reemplace los colores con propiedades personalizadas de CSS.
Los patrones CSS no requieren solicitudes HTTP, tienen un tamaño de archivo cero, se escalan infinitamente sin pixelación, nunca provocan cambios en el diseño y se pueden cambiar de color al instante, lo que los hace superiores a los patrones basados en imágenes en la mayoría de los casos.
Sí. Utilice una sintaxis de valor arbitraria: bg-[radial-gradient(...)] bg-[length:20px_20px], o agregue el patrón a su tailwind.config.js en theme.extend.backgroundImage.
Sí, CSS admite múltiples capas de fondo separadas por comas. Coloque un patrón sobre un degradado o sobre otro patrón.
El valor del tamaño del fondo controla la densidad del patrón. Un tamaño más pequeño produce un patrón más denso; un tamaño más grande lo hace más extendido.
Sí. Todos los patrones son código CSS estándar y se pueden utilizar libremente en proyectos personales y comerciales sin atribución.
Absolutamente. Se permite sin restricciones el uso de código CSS de esta biblioteca en sitios web comerciales, aplicaciones web, productos SaaS y proyectos de clientes.