Generador de patrones CSS

Patrones de fondo CSS

Un patrón de fondo CSS es una imagen embaldosada (rayas, puntos, rejillas, damas, triángulos) dibujada enteramente con funciones de gradiente CSS y sin archivo de imagen. Tres propiedades hacen todo el trabajo: background-image pinta cualquier imagen de gradiente en el elemento, background-size establece el tamaño de una baldosa de esa imagen, y background-repeat (que por defecto es repeat) embaldosa esa imagen en ambos ejes. background-position luego desplaza la costura para que la baldosa de cada capa se alinee con las demás. Un patrón es por tanto solo varias imágenes de gradiente apiladas unas sobre otras, cada una dimensionada a la misma baldosa, cada una posicionada para encajar. Los navegadores pintan los valores background-image separados por comas de adelante hacia atrás, así que la primera imagen de la lista se sitúa encima de la segunda, la segunda encima de la tercera, y así sucesivamente.

Todo el género existe gracias a un truco sintáctico: las paradas de color duras. Paradas de color adyacentes en la misma posición producen una transición instantánea en lugar de una mezcla. linear-gradient(red 50%, blue 50%) no es un degradado de rojo a azul (es una línea nítida. Sin paradas duras se obtiene un gradiente suave; con ellas, geometría. Rayas, puntos, damas, triángulos, cheurones) cada patrón que esta herramienta emite está construido a partir de esa única propiedad, aplicada a distintos ángulos y tamaños de baldosa.

Una breve historia, Lea Verou y la Patterns Gallery

Si un único recurso es responsable de todo el género de los patrones de fondo en CSS puro, es la CSS3 Patterns Gallery de Lea Verou, alojada originalmente en lea.verou.me/css3patterns/. Verou había estado publicando demos individuales a lo largo de 2010 y a comienzos de 2011, incluyendo un celebrado paseo por el damero en febrero de 2011, antes de anunciar la galería propiamente dicha el 15 de abril de 2011 en una entrada titulada «CSS3 patterns gallery and a new pattern» (el nuevo patrón era un diseño de cubos japoneses que ella calificó como el más difícil que jamás había hecho). Pocos meses después, el 1 de diciembre de 2011, escribió el ensayo canónico «CSS3 Patterns, Explained» para el calendario de adviento 24 ways, todavía la mejor explicación en lenguaje claro de la técnica de paradas de color duras que sustenta cada raya, lunar y damero. En junio de 2015 O’Reilly publicó su libro CSS Secrets: Better Solutions to Everyday Web Design Problems, que amplió el capítulo de patrones a una taxonomía completa. El impacto cultural más amplio de la galería está documentado en las propias notas de proyecto de Verou: «inició la práctica generalizada de usar paradas duras en gradientes CSS para crear fácilmente patrones de fondo y otros gráficos» y fue usada después por los ingenieros de Opera Software para afinar su implementación de gradientes.

Del prefijo de proveedor a la especificación

Los gradientes CSS están definidos en el CSS Image Values and Replaced Content Module Level 3 (comúnmente «CSS Images 3»), mantenido por el W3C CSS Working Group y editado por Tab Atkins Jr. y Elika J. Etemad entre otros. El First Public Working Draft fue el 12 de julio de 2011; la spec alcanzó Candidate Recommendation en abril de 2012, fijando la sintaxis moderna sin prefijo, incluida la convención de que 0deg apunta hacia arriba y to right equivale a 90deg. Orden de envío de los navegadores: WebKit fue el primero por amplio margen, con -webkit-gradient() usable en Safari 4 (2009); Firefox envió -moz-linear-gradient() en Firefox 3.6 (21 de enero de 2010); Internet Explorer 10 envió las formas sin prefijo en 2012; la sintaxis sin prefijo se estabilizó en todos los motores principales a finales de 2013. conic-gradient() se especificó en CSS Images Level 4 porque Level 3 ya había entrado en Last Call cuando se diseñaba la sintaxis; se envió en Chrome 69 (4 de septiembre de 2018), Safari 12.1 (25 de marzo de 2019) y Firefox 83 (17 de noviembre de 2020). En 2026 puedes escribir background: linear-gradient(...) y background: conic-gradient(...) con confianza, sin prefijos ni fallbacks para ningún navegador que merezca la pena soportar.

linear-gradient: ángulos y lados

La gramática formal es linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convención de ángulo hace tropezar con frecuencia a los desarrolladores porque difiere de la convención SVG/canvas. 0deg equivale a to top (la línea del gradiente apunta hacia arriba, así que el último color aparece en la parte superior de la caja). 90deg equivale a to right. 180deg equivale a to bottom (el valor por defecto si no se da dirección). 270deg equivale a to left. Los ángulos crecientes giran en sentido horario desde arriba, lo opuesto a la convención matemática (donde 0 está a la derecha y los ángulos crecen en sentido antihorario) y lo opuesto al <linearGradient> de SVG. Una sutileza útil: to right y 90deg son equivalentes solo en cajas cuadradas. En una caja no cuadrada, to top right produce una línea de gradiente exactamente perpendicular a la diagonal desde la esquina inferior izquierda (lo que significa que el gradiente alcanza la esquina limpiamente) mientras que 45deg es siempre literalmente 45 grados, independientemente de la relación de aspecto. Esto importa menos para patrones embaldosados (donde las baldosas suelen ser cuadradas) pero mucho para fondos hero.

radial-gradient: formas, tamaños y lunares

La gramática es radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Los dos valores de forma son circle y ellipse (por defecto ellipse). El tamaño puede ser una de cuatro palabras clave de extensión (closest-side, closest-corner, farthest-side o farthest-corner (el por defecto)) o longitudes/porcentajes explícitos. Para patrones de lunares la receta canónica es radial-gradient(circle at center, #000 0 5px, transparent 5px) con background-size: 20px 20px: un círculo negro de 5 px en el centro de cada baldosa de 20 px, con el resto transparente. Los puntos pueden desplazarse con una segunda capa a media baldosa para producir una rejilla hexagonal de puntos. Para rayas puras no hace falta dimensionar la baldosa manualmente: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) produce rayas diagonales blanco-negro de 10 px de ancho, repitiéndose por toda la caja, sin necesitar una declaración background-size. Los gradientes repetitivos también tienen contrapartes radial y conic, repeating-radial-gradient hace anillos concéntricos, repeating-conic-gradient hace molinetes.

conic-gradient: los gráficos de tarta y soles que antes no podías construir

conic-gradient() rota las paradas de color alrededor de un centro en lugar de a lo largo de una línea o desde un centro. Las paradas de color se posicionan en ángulos, no en longitudes. La historia intelectual es una de las historias CSS más interesantes: Lea Verou redactó una propuesta conical-gradient() ya en 2011, mucho antes de que ningún navegador la soportara, y Tab Atkins Jr. acreditó su borrador cuando añadió formalmente la función a CSS Image Values Level 4. La implementación se demoró años. En junio de 2015, Verou escribió un polyfill (usando SVG y su biblioteca -prefix-free) y lo publicó sobre el escenario en CSSConf, titulando la entrada «Conical gradients, today!» El soporte nativo llegó en Chrome 69 (4 de septiembre de 2018), Safari 12.1 (25 de marzo de 2019) y Firefox 83 (17 de noviembre de 2020). Lo que los gradientes cónicos desbloquean que linear y radial no pueden: gráficos de tarta y de donut sin canvas, SVG ni JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) más border-radius: 50% es un gráfico de tarta completo); ruedas de color (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) produce la rueda de tonos estándar); patrones de rayos y estallidos a partir de colores alternados en paradas duras a pequeños intervalos angulares; marcos de gradiente y reflejos angulares en esquinas; y tableros de damas en una sola declaración (repeating-conic-gradient(#000 0 25%, #fff 0 50%) más background-size produce un damero con una sola capa de gradiente en lugar de dos gradientes lineales apilados).

Rendimiento: cuándo los patrones CSS ganan a las imágenes y cuándo no

El argumento de rendimiento para los patrones en CSS puro es el que más merece la pena entender bien porque se sobre-simplifica en la copia de marketing. Ganancias del CSS puro: sin petición HTTP, sin decodificación, sin overhead PNG/JPEG/WebP (una regla CSS de 4 líneas reemplaza un archivo binario; independiente de la resolución vectorial) un patrón se ve idéntico a 1×, 2×, 3× device pixel ratio sin necesidad de enviar assets @2x y @3x, lo que es la mayor razón por la que los design systems prefieren patrones de gradiente frente a PNG para pantallas retina; trivialmente recoloreables, cambiar una variable CSS actualiza todo el patrón; animables vía background-position o, con @property, vía paradas de color animables. Costes que conocer: el coste de pintura escala con los píxeles tocados y la complejidad del gradiente, los gradientes están entre las operaciones de pintura más caras, junto con grandes box-shadows, SVG complejos y efectos de texto pesados, y apilar muchas capas de gradiente en un hero a pantalla completa puede costar frames en GPU de gama baja. Animar los colores del gradiente desencadena repaints completos por frame (esto está cambiando con propiedades personalizadas registradas vía @property en Chromium y Firefox, pero sigue siendo más seguro animar background-position). La heurística práctica: si tienes un único patrón a pantalla completa y no lo animas, no notarás nada. Si estás apilando cinco capas de gradiente en cada tarjeta de una lista larga, perfila.

Accesibilidad: contraste, decoración y movimiento reducido

Los patrones de fondo CSS son, por definición, decorativos. No aparecen en el árbol del documento ni en el árbol de accesibilidad; desde la perspectiva de una tecnología de asistencia, simplemente no existen. Eso es en gran parte una característica, el tutorial WAI del W3C sobre imágenes decorativas dice explícitamente que la imaginería decorativa «debe proporcionarse usando imágenes de fondo CSS en lugar de» <img> para que sea naturalmente ignorada por los lectores de pantalla. Pero el contraste sigue aplicando a cualquier cosa que pongas encima del patrón. El criterio de éxito WCAG 2.1 1.4.3 exige una relación de contraste de 4,5:1 para texto normal y 3:1 para texto grande. Los patrones lo hacen más difícil porque la luminancia local del fondo varía píxel a píxel. La técnica WCAG G18 aborda esto directamente: si el fondo tiene patrón, el fondo alrededor de las letras puede elegirse o sombrearse para que las letras mantengan una relación de contraste de 4,5:1 con el fondo detrás de ellas, incluso si no tienen esa relación con todo el fondo. En la práctica: si pones texto sobre un patrón, o elige colores de patrón con luminancia similar entre sí, o coloca una tarjeta de color sólido entre el texto y el patrón. WCAG 2.1 también exige contraste de 3:1 para componentes UI no textuales y gráficos, lo que puede aplicarse a iconos y separadores basados en patrones. Si tu patrón está animado (una raya en scroll, un cónico que rota lentamente, un esqueleto shimmer) envuelve la animación en @media (prefers-reduced-motion: no-preference). La motivación es médica, no estilística: las animaciones pueden disparar síntomas vestibulares (náuseas, mareo), crisis en personas con epilepsia fotosensible, y migrañas.

Patrones SVG vs gradientes CSS: una comparación justa

El elemento <pattern> de SVG es el hermano espiritual de los gradientes CSS. Ambos te permiten embaldosar una celda unidad por un área de relleno. Tienen sweet spots diferentes. Los patrones SVG ganan cuando la unidad es una forma compleja (una hoja, una escama de pez, un hexágono irregular) que los gradientes no pueden expresar naturalmente; cuando quieres enviar un asset creado por un diseñador (Hero Patterns de Steve Schoger, lanzado el 27 de septiembre de 2016 bajo CC BY 4.0, es la biblioteca canónica de patrones SVG); cuando necesitas geometría vectorial precisa para curvas nítidas que las paradas duras de gradiente solo pueden aproximar; o cuando quieres que el patrón se reutilice en múltiples elementos SVG vía fill="url(#myPattern)". Los gradientes CSS ganan cuando el patrón es geométrico, rayas, puntos, rejillas, dameros, cheurones, triángulos, cualquier cosa componible a partir de líneas rectas y círculos; cuando quieres cero overhead HTTP; cuando necesitas personalización por instancia vía variables CSS (--stripe-color: red actualiza el patrón al instante); cuando quieres aplicar el patrón como fondo CSS a cualquier elemento HTML, no solo dentro de un SVG; o cuando quieres animar el patrón sin elementos <animate>. Una técnica híbrida común es incrustar un SVG como una URL data:image/svg+xml,... dentro de background-image: esto consigue la ventaja «sin petición HTTP extra» del CSS puro mientras permite a los diseñadores expresar formas arbitrarias. La desventaja es la fricción de codificación: # se convierte en %23, las comillas dobles necesitan escape, e inspeccionar el SVG en DevTools es incómodo. Este generador emite patrones de gradiente CSS puro; el compromiso es intencional, simplicidad y carga pequeña frente a máxima flexibilidad de forma.

Donde los patrones CSS se ganan el sustento

El género es más amplio que el papel pintado. Los usos reales en producción incluyen:

• Fondos de sección hero. Patrones sutiles a gran escala detrás del título de la página (líneas diagonales, puntos grandes, un suave sol conic-gradient) dan al hero textura visual sin añadir peso de imagen.
• Placeholders de estado vacío. Cuando una lista no tiene ítems, un patrón de damero o de rejilla en el área vacía comunica «esto está intencionalmente en blanco» mejor que un espacio blanco plano.
• Esqueletos de carga. El esqueleto «shimmer» clásico es un linear-gradient con blanco semitransparente moviéndose por un fondo gris, animado vía background-position. La técnica es ya un estándar UX.
• Fondos de tarjetas e insignias. Una tenue rejilla de puntos detrás de una insignia «Pro» o un pinstripe diagonal detrás de una tarjeta de feature añade textura sin competir con el texto.
• Estados de error y advertencia. Rayas diagonales repetidas (el patrón cono de obra) señalan «zona de advertencia» intuitivamente. repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) es el overlay «atención» universal.
• Estéticas retro y synthwave. La rejilla Tron de los 80 (una rejilla magenta deformada en perspectiva avanzando hacia un horizonte) es un efecto en CSS puro construido a partir de un repeating-linear-gradient más transform: perspective(...) rotateX(...).
• Divisores de sección. Una corta banda a todo ancho de patrón entre secciones rompe una página larga sin añadir peso semántico.
• Perforaciones aptas para impresión. Las líneas de perforación punteadas/discontinuas para tickets y cupones imprimibles son más fáciles de crear con repeating-linear-gradient que con SVG.
• Patrones modo claro/oscuro. Los patrones se intercambian bien entre modo claro y oscuro porque están dirigidos por variables CSS; una declaración se adapta a ambas paletas.

Cómo usar

1. Elige un tipo de patrón: selecciona rayas, puntos, damero, cuadrícula, zigzag, triángulos y mucho más, todos en CSS puro.
2. Personaliza colores y escala: ajusta colores de primer plano y fondo, tamaño del patrón, ángulo y espaciado con los deslizadores.
3. Previsualiza en directo: el patrón se muestra en tiempo real mientras modificas los ajustes.
4. Copia el CSS: copia la propiedad background generada y pégala en tu hoja de estilo.

Preguntas frecuentes

¿Funcionará el CSS en navegadores más antiguos?

Todo navegador moderno importante envía linear-gradient, radial-gradient y las variantes repetitivas sin prefijo y habilitados por defecto, la limpieza se completó a finales de 2013. conic-gradient tardó más (Chrome 69 en septiembre de 2018, Safari 12.1 en marzo de 2019, Firefox 83 en noviembre de 2020) pero también es universal en 2026. El generador no emite prefijos de proveedor porque ninguno hace falta para ningún navegador que merezca la pena soportar. Microsoft Edge dejó su motor EdgeHTML en enero de 2020 e IE11 alcanzó su fin de vida el 15 de junio de 2022; ambos son ya notas históricas para cualquier herramienta nueva.

¿Son los patrones CSS más rápidos que los fondos de imagen embaldosados?

Para patrones estáticos, sí, un patrón CSS elimina una petición HTTP, una pasada de decodificación, y el envío de assets multi-resolución requerido para pantallas retina. El patrón también es vectorialmente perfecto a cualquier zoom y trivialmente recoloreable a través de variables CSS. El compromiso es el coste de pintura: los gradientes están entre las cosas más caras que un navegador puede pintar, y apilar muchas capas de gradiente en un hero a pantalla completa puede costar frames en GPU de gama baja. Para un único patrón estático en una tarjeta o sección no lo notarás. Si te encuentras apilando cinco capas de gradiente en cada ítem de una lista larga, perfila antes de enviar.

¿Cómo pongo texto sobre un patrón de forma accesible?

WCAG 2.1 SC 1.4.3 exige contraste 4,5:1 para texto normal y 3:1 para texto grande respecto al fondo. Con un fondo a patrón la luminancia local varía píxel a píxel, lo que puede hacer fallar el contraste en el peor caso aunque el promedio parezca bien. Dos estrategias seguras: elegir colores de patrón con luminancia similar entre sí (para que el contraste con tu texto sea consistente en toda la baldosa), o colocar una tarjeta de color sólido entre el texto y el patrón. Poner texto directamente sobre un patrón de alto contraste (p. ej. rayas blanco-y-negro) es el caso donde los verificadores de contraste y los lectores humanos sufren ambos.

¿Puedo animar el patrón?

Sí. La animación más barata es desplazar background-position con @keyframes: esto desencadena una actualización solo de compositor en la mayoría de navegadores y puede correr suave a 60 fps. Animar los colores del gradiente en sí es más caro porque cada frame desencadena una pintura completa; Chromium y Firefox modernos pueden mitigarlo con propiedades personalizadas registradas por @property, pero background-position es el por defecto más seguro. Envuelve siempre la animación en @media (prefers-reduced-motion: no-preference): los fondos animados pueden disparar síntomas vestibulares, crisis y migrañas para usuarios sensibles.

¿Por qué mi patrón se ve borroso en pantallas retina?

No debería, ese es el sentido de usar gradientes en lugar de imágenes bitmap. Si el tuyo lo está, comprueba que las paradas de color estén en porcentajes nítidos (una parada dura son dos paradas en la misma posición; un ligero hueco aunque sea de 50% 50.1% introduce una banda de desenfoque visible) y que el dimensionamiento de baldosa esté en px en lugar de em o %, que pueden interactuar de forma impredecible con el escalado de texto. Los gradientes cónicos en versiones antiguas de Safari renderizaban el centro como un área ligeramente borrosa; Safari y Chrome modernos rasterizan ambos en GPU y el problema prácticamente ha desaparecido.

¿Se envían mis datos a algún sitio?

No. La selección de patrón, la elección de colores, el dimensionamiento y la generación CSS se ejecutan todos en tu navegador. No hay peticiones salientes cuando usas los controles, puedes verificarlo en la pestaña Network de DevTools. El CSS generado es tuyo para pegarlo donde quieras.

Herramientas relacionadas