Generador de Patrones CSS - Crea Patrones de Fondo con Gradientes CSS en Línea
Genera patrones de fondo repetibles usando gradientes CSS puros. 21 patrones con vista previa en tiempo real, colores personalizados, control de tamaño y opacidad — 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es un patrón de fondo CSS?
Un patrón de fondo CSS es un diseño visual repetitivo creado completamente con funciones de gradiente CSS como linear-gradient(), radial-gradient() y repeating-conic-gradient(). A diferencia de los fondos basados en imágenes, los patrones CSS no requieren descargas adicionales, son infinitamente escalables y se ven nítidos en cualquier resolución.
¿Cómo uso este generador de patrones CSS?
Navegue por la biblioteca de patrones y haga clic en una miniatura para seleccionar un patrón. Personalice los colores con los selectores de color. Ajuste el tamaño, la opacidad y otros parámetros con los controles deslizantes. Previsualice el patrón en tiempo real. Copie el código CSS generado y péguelo en su hoja de estilos.
¿Mis datos están seguros? ¿Se envía algo al servidor?
Sí, sus datos están completamente seguros. Esta herramienta se ejecuta 100% en su navegador. Ninguna selección de color, patrón o código CSS generado se envía a ningún servidor. Toda la generación de patrones se realiza del lado del cliente.
¿Cuál es la diferencia entre patrones CSS y SVG?
Los patrones CSS se construyen completamente a partir de funciones de gradiente CSS y no requieren archivos adicionales ni solicitudes HTTP. Los patrones SVG usan gráficos vectoriales incrustados en CSS a través de url() o URIs de datos. Los patrones CSS son más ligeros y fáciles de personalizar, mientras que SVG puede lograr formas más complejas.
¿Puedo usar estos patrones en cualquier framework CSS?
Sí. El CSS generado usa propiedades estándar compatibles con todos los navegadores modernos y frameworks CSS. Puede usar la salida directamente en CSS puro, Sass, Less, Tailwind o cualquier solución CSS-in-JS.
¿Los patrones CSS afectan el rendimiento de mi sitio web?
Los patrones CSS son extremadamente eficientes. No agregan solicitudes HTTP, no requieren decodificación de imágenes y se renderizan de forma nativa. Un patrón típico agrega solo 100-300 bytes de CSS, siendo mucho más rápido que fondos equivalentes con imágenes.
Ejemplos de Código
// Creating CSS background patterns programmatically
// Dots pattern
function createDotsPattern(dotColor, bgColor, size = 20, dotRadius = 3) {
return {
backgroundImage: `radial-gradient(circle, ${dotColor} ${dotRadius}px, transparent ${dotRadius}px)`,
backgroundSize: `${size}px ${size}px`,
backgroundColor: bgColor,
};
}
// Checkerboard pattern
function createCheckerboard(color, bgColor, size = 40) {
return {
backgroundImage: `repeating-conic-gradient(${color} 0% 25%, transparent 0% 50%)`,
backgroundSize: `${size}px ${size}px`,
backgroundColor: bgColor,
};
}
// Diagonal stripes pattern
function createDiagonalStripes(stripeColor, bgColor, size = 20, angle = 45) {
const half = size / 2;
return {
backgroundImage: `repeating-linear-gradient(${angle}deg, ${stripeColor}, ${stripeColor} ${half}px, transparent ${half}px, transparent ${size}px)`,
backgroundSize: `${size}px ${size}px`,
backgroundColor: bgColor,
};
}
// Grid pattern
function createGrid(lineColor, bgColor, size = 30, thickness = 1) {
return {
backgroundImage: [
`linear-gradient(0deg, ${lineColor} ${thickness}px, transparent ${thickness}px)`,
`linear-gradient(90deg, ${lineColor} ${thickness}px, transparent ${thickness}px)`,
].join(', '),
backgroundSize: `${size}px ${size}px`,
backgroundColor: bgColor,
};
}
// Apply pattern to a DOM element
function applyPattern(element, patternCSS) {
Object.assign(element.style, patternCSS);
}
// Usage
const myDiv = document.getElementById('patterned-div');
applyPattern(myDiv, createDiagonalStripes('rgba(0,0,0,0.1)', '#ffffff', 20, 45));
applyPattern(myDiv, createCheckerboard('rgba(0,0,0,0.05)', '#f0f0f0', 40));