Patrón de fondo CSS

El generador de patrones de fondo CSS es una herramienta en línea que crea patrones de fondo CSS puros y sin costuras usando gradientes CSS. Admite cinco tipos de patrones: puntos, cuadrícula, diagonal, zigzag y ondas. Todos los patrones se generan completamente con CSS, sin necesidad de imágenes, lo que los hace ligeros, escalables e independientes de la resolución.

Seleccione un tipo de patrón en el menú desplegable y ajuste el color de primer plano, el color de fondo y el tamaño del patrón con los controles. El área de vista previa se actualiza en tiempo real para que pueda ver exactamente cómo se ve su patrón. Una vez satisfecho, haga clic en el botón Copiar para copiar el código CSS generado al portapapeles.

Hay cinco tipos disponibles: Puntos (un patrón de círculos repetidos usando radial-gradient), Cuadrícula (una cuadrícula cruzada usando dos capas de linear-gradient), Diagonal (líneas diagonales a 45 grados usando repeating-linear-gradient), Zigzag (un patrón en zigzag usando cuatro capas de linear-gradient) y Ondas (un patrón ondulado usando círculos radial-gradient desplazados).

Use el selector de color de primer plano para establecer el color de las líneas o puntos del patrón, y el selector de color de fondo para el color base detrás del patrón. El control deslizante de tamaño controla el espaciado de repetición del patrón. Valores más pequeños crean patrones más densos, mientras que valores más grandes producen diseños más espaciados. Experimente con diferentes combinaciones de colores y tamaños.

El código CSS copiado se puede pegar directamente en cualquier hoja de estilos o estilo en línea. Aplíquelo a cualquier elemento HTML usando una clase o estilo en línea. Estos patrones funcionan bien para fondos de secciones, acentos de tarjetas, áreas hero y divisores decorativos. Al ser CSS puro, no añaden solicitudes HTTP adicionales y escalan perfectamente en todas las densidades de pantalla.