Generador de fondo de cuadrícula transparente

Funciones

• Cuadrícula y rayas diagonales a 45°
• Los colores de primer plano y de fondo se eligen con el selector
• Tamaño de celda ajustable de 4 a 64px
• ⚠️ Los cinco puntos 0/25/50/75/100 están escritos, así que el navegador no convierte ninguno en degradado
• La cuadrícula incluye una versión con conic-gradient y otra con cuatro capas linear-gradient, con su compromiso explicado
• Las rayas incluyen una versión con repeating-linear-gradient y otra en mosaico
• Elige una abreviatura background o propiedades sueltas background-image, background-size y background-position
• Vista previa en vivo; un color inválido vuelve al predeterminado, así que el CSS generado siempre es válido
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige cuadrícula o rayas y ajusta el tamaño de celda
2. Selecciona el color de primer plano y el de fondo con el selector
3. Elige abreviatura o propiedades sueltas y mira la vista previa
4. Copia el CSS generado

Preguntas frecuentes

¿Por qué la cuadrícula es un conic-gradient? ¿No sirve un degradado repetido?

Porque la cuadrícula es bidimensional, mientras que `repeating-linear-gradient` es unidimensional (rayas): con uno solo no se dibujan cuadros. Así que una cuadrícula es o bien un `conic-gradient` con cuatro sectores por celda, o bien cuatro capas `linear-gradient` apiladas. Las rayas sí son unidimensionales, y ahí encaja `repeating-linear-gradient`. Aquí están las dos, para que elijas según el navegador objetivo.

¿Qué pasa si falta un punto?

No hay error, pero el patrón se rompe. Si te detienes en `50% 75%`, por ejemplo, el navegador convierte el tramo restante en un degradado, así que el último cuarto de cada celda se vuelve borroso: parece casi correcto hasta que lo miras fijamente. Por eso aquí se escriben explícitamente los cinco límites 0/25/50/75/100, y una prueba comprueba que están tanto el 25% como el 75%.

¿Uso la abreviatura o las propiedades sueltas?

Usa propiedades sueltas cuando vayas a fusionarlo con estilos que ya tienes (`background-image`, `background-size` y `background-position` en líneas aparte), porque así puedes cambiar una sin tocar las demás capas; una sola abreviatura `background` es más corta cuando escribes un fondo desde cero. La versión en mosaico de las rayas y la versión linear de la cuadrícula son multicapa, y una abreviatura las escribiría en una línea larguísima, así que esas siempre salen como propiedades sueltas.