CodeKitHub¿Qué es esta herramienta?
CSS puede dibujar patrones repetitivos sin ningún archivo de imagen usando degradados — radial-gradient() y linear-gradient() — como background-image, combinados con un background-size más pequeño que el elemento para que el degradado se repita en mosaico. Los lunares usan un repeating-radial-gradient, las rayas y el tablero de ajedrez usan linear-gradient() repetido o en capas, y las líneas de cuadrícula usan dos linear-gradient() superpuestos.
Esta herramienta construye esas declaraciones de degradado por ti. Elige un tipo de patrón, ajusta el color del patrón, el color de fondo y el espaciado, y observa cómo se actualiza la vista previa en vivo — luego copia el CSS exacto de background-image y background-size.
Fuente: CSS Images Module Level 3, W3C — define repeating-linear-gradient() y repeating-radial-gradient(), las funciones a partir de las cuales se construyen estos patrones.
¿Por qué utilizarlo?
- Sin archivos de imagen, sin peticiones HTTP — el patrón es CSS puro y se renderiza al instante a cualquier resolución, incluidas las pantallas retina/alta densidad.
- Color y espaciado totalmente ajustables sin escribir a mano la sintaxis de los degradados ni calcular las matemáticas del mosaico.
- La vista previa en vivo muestra el patrón repetitivo exacto antes de copiar nada.
- Escala perfectamente por tratarse de cálculo vectorial y no de una imagen ráster — sin desenfoque cuando el elemento cambia de tamaño.
- Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio.
- Gratis, sin registro, funciona en móvil.
Cómo utilizarlo
- Elige un tipo de patrón: lunares, rayas diagonales, tablero de ajedrez o líneas de cuadrícula.
- Selecciona el color del patrón y el color de fondo que aparece entre/detrás de las formas del patrón.
- Ajusta el control deslizante de tamaño para hacer los puntos, rayas o celdas de la cuadrícula más grandes o más pequeños — esto también controla la densidad con la que se repite el patrón.
- Copia el CSS generado y pégalo como el background-image (y el background-size/background-position cuando se muestre) de cualquier elemento.
Ejemplo
Entrada
Patrón: lunares · Color: azul · Fondo: blanco · Tamaño: 24pxResultado
background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;Un patrón clásico de lunares claros, usado a menudo como fondo discreto de una sección o textura de tarjeta.
Cómo se construye cada patrón
- Lunares: un radial-gradient() dibuja un pequeño círculo relleno, y luego background-size lo repite en un mosaico de puntos.
- Rayas diagonales: un repeating-linear-gradient() en un ángulo de 45 grados alterna entre el color del patrón y el color de fondo a un intervalo fijo.
- Tablero de ajedrez: dos capas superpuestas de linear-gradient() a 45 grados, desplazadas entre sí medio mosaico, producen cuadrados claros/oscuros alternados.
- Líneas de cuadrícula: dos líneas finas de linear-gradient() — una horizontal, otra vertical — repetidas en mosaico con el espaciado elegido para formar una cuadrícula, similar al papel cuadriculado.
Cuándo usar patrones CSS en lugar de archivos de imagen
Un patrón de degradado CSS no tiene tamaño de archivo ni petición HTTP, así que se carga al instante y nunca se ve borroso en pantallas de alta densidad, a diferencia de un mosaico de fondo PNG rasterizado. Es ideal para texturas sutiles detrás de texto, separadores de sección, ilustraciones de estados vacíos o tarjetas de marcador de posición. Para patrones ilustrados o fotográficos complejos, una imagen real sigue siendo la herramienta adecuada — los degradados CSS son más adecuados para formas repetitivas simples y geométricas como las de aquí.
Combinarlo con otros efectos CSS
Los patrones funcionan bien como fondo detrás de tarjetas de glassmorphism, ya que el desenfoque necesita algo con textura visual detrás para ser visible. También combinan de forma natural con esquinas redondeadas en el elemento contenedor.
→ Generador de Glassmorphism CSS · Generador de Border Radius
Preguntas frecuentes
¿Estos patrones requieren algún archivo de imagen?
No. Cada patrón aquí se genera puramente con degradados CSS como background-image — no interviene ningún PNG, SVG u otro archivo, por lo que no hay ninguna petición HTTP adicional ni riesgo de desenfoque en pantallas de alta resolución.
¿Puedo cambiar el tamaño del patrón?
Sí — el control deslizante de tamaño controla el background-size, que establece el tamaño de un mosaico repetido del patrón. Un tamaño más pequeño agrupa los puntos, rayas o celdas de la cuadrícula más juntos; un tamaño mayor los separa.
¿Por qué el patrón de tablero de ajedrez usa dos degradados?
Un único linear-gradient() solo puede alternar colores en una dirección. Superponer dos degradados a 45 grados, desplazados entre sí medio mosaico, es lo que produce los cuadrados claros/oscuros alternados de un tablero de ajedrez — esta es la técnica estándar para tableros de ajedrez solo con CSS.
¿Este patrón se verá nítido en pantallas retina/alta densidad?
Sí. Como el patrón es un degradado matemático y no una imagen de mapa de bits, se renderiza a la resolución que necesite la pantalla, sin ampliación ni desenfoque — a diferencia de un pequeño mosaico de imagen ráster estirado o repetido a alta densidad de píxeles.
¿Puedo usar estos patrones como fondo de página completa?
Sí — aplica el background-image, background-size y background-position (donde esté presente) generados al body o a cualquier elemento contenedor de ancho completo. Ten en cuenta el contraste: un patrón recargado y de alto contraste detrás del texto del cuerpo puede perjudicar la legibilidad, así que ajustes más claros/sutiles suelen funcionar mejor para grandes áreas de fondo.