Cómo usar: Generador de patrones SVG
- Elige un patrón: puntos, cuadrícula, líneas, zigzag, ondas, cruz, tablero de ajedrez, círculos, triángulos, rayado cruzado, rombos o rayas.
- Define el tamaño de la celda, el grosor de la línea y la opacidad; una opacidad baja crea texturas sutiles.
- Elige los colores del patrón y del fondo, o un fondo transparente para colocarlo sobre tu propio color o degradado.
- Copia el CSS (el SVG va incrustado como data URI) o descarga la celda como archivo SVG.
¿Por qué usar patrones SVG?
Una celda de patrón es un SVG diminuto, normalmente de menos de 300 bytes, que el navegador repite con background-repeat. Se ve nítido con cualquier nivel de zoom y en pantallas retina, no necesita una petición extra si va incrustado como data URI y cambia de color al instante modificando dos valores.
.hero {
background-color: #0f172a;
background-image: url("data:image/svg+xml,…");
background-size: 24px 24px;
}Los patrones están diseñados para que sus bordes encajen perfectamente al repetirse. Para superponer un patrón sobre un degradado, marca Fondo transparente e indica ambas imágenes: background-image: url(…patrón…), linear-gradient(…). Para divisores de hero, consulta el Generador de ondas SVG y el Generador de divisores de sección.
También se busca como: patrón de fondo css, generador de patrones sin costuras, generador de fondos svg, patrón de puntos css, patrón de cuadrícula css, patrones hero, patrón de fondo sutil.
Herramientas que combinan con: Generador de patrones SVG
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de Blobs SVG — Crea formas blob orgánicas y suaves para fondos hero, avatares e ilustraciones.
- Conversor SVG a CSS — Pega un SVG y obtén un data URI compacto codificado en URL, además de CSS listo para usar con background-image y mask-image recoloreable.
- Generador de Glassmorphism — Diseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los navegadores: con el prefijo -webkit-backdrop-filter y un fallback para navegadores antiguos.