Patrones de fondo
Fondos repetibles en CSS o SVG
Ajustes
Vista previa
Código
background-color: #fef2f2; background-image: radial-gradient(circle, #b91c1c 3px, transparent 3.5px); background-size: 24px 24px;
Acerca de la herramienta
Este generador crea fondos repetibles para una sección de página, una tarjeta o una cabecera, sin ningún archivo de imagen que alojar. Hay nueve patrones: puntos, puntos desplazados, cuadrícula, rayas, tablero, triángulos, zigzag, ondas y cruces. Ajustas el tamaño del patrón de 4 a 200 px, el grosor del trazo o el radio de los puntos, el ángulo en los patrones que lo admiten, y el color y la opacidad del patrón y del fondo.
El código se genera con degradados CSS puros o como SVG integrado en una data URL. El zigzag, las ondas y las cruces no tienen un equivalente fiel en degradados, así que pasan a SVG automáticamente. El resultado son unas pocas declaraciones background que pegas en tu hoja de estilos, y también puedes descargar el patrón como archivo SVG con su color de fondo.
Cómo usarla
- Elige un «Patrón» en la cuadrícula.
- Ajusta el «Tamaño», el «Grosor» y, si el patrón lo permite, el «Ángulo».
- Elige el «Color del patrón», el «Color de fondo» y su opacidad, o pulsa «Invertir los colores».
- Selecciona el «Formato de salida»: «CSS (degradados)» o «SVG (data URL)».
- Pulsa «Copiar el CSS» o «Descargar el SVG».
Preguntas frecuentes
¿Conviene usar degradados CSS o SVG?
Los degradados CSS dan un código legible y fácil de retocar a mano, sin imágenes. El SVG en data URL reproduce algunos patrones con más fidelidad y se ve nítido. Para el zigzag, las ondas y las cruces solo hay SVG, aunque elijas CSS.
¿Qué contiene el código copiado?
Declaraciones listas para pegar: background-color, background-image y, según el patrón, background-size y background-position. Basta con ponerlas en la regla CSS del elemento que quieras decorar. No hace falta ningún archivo externo, porque el SVG va dentro de la data URL.
¿Por qué un patrón inclinado deja de repetirse en mosaicos?
Cuando el patrón está girado, el SVG usa un elemento pattern rotado que llena toda la superficie en lugar de repetir un mosaico pequeño, y background-size desaparece del código. En modo CSS, las rayas y la cuadrícula aplican el ángulo directamente en el degradado.
¿Cómo consigo un patrón sobre fondo transparente?
Pon la «Opacidad del fondo» al 0 %: el color de fondo pasa a ser transparent y solo se dibuja el patrón, encima de lo que haya detrás del elemento. También puedes bajar la opacidad del patrón para lograr una textura más discreta.