Generador de patrones CSS de fondo

Cómo funciona

Escriba dos colores en el panel izquierdo: la primera línea es el color de las rayas o los puntos, la segunda el del fondo. Si escribe una sola línea, el fondo se asume blanco. Se reconocen las notaciones HEX, RGB y HSL. Después elija el patrón y ajuste el paso: el paso dice cada cuántos píxeles se repite el motivo — con un paso de 16 píxeles, un patrón de rayas alterna una banda de color de 16 píxeles con un hueco de 16 píxeles, así que el dibujo vuelve a empezar cada 32 píxeles. Pegue el CSS resultante tal cual en su hoja de estilos; el nombre de la clase puede cambiarlo libremente. Los dos cuadros bajo la salida llevan los mismos valores HEX que aparecen en el CSS, para que no confunda cuál color es el patrón y cuál el fondo. El resultado no es un archivo de imagen sino un degradado que dibuja el propio navegador: se mantiene nítido con cualquier zoom o densidad de pantalla y no añade ninguna petición a la página.

Esta herramienta también se busca como generador de patrones css, fondo de rayas css, fondo cuadriculado css, css background pattern.

¿Qué es repeating-linear-gradient?

repeating-linear-gradient es la función CSS que toma la transición de colores definida entre dos puntos y la repite sin fin. Un linear-gradient normal estira su último color por todo el espacio restante, mientras que la versión repetida vuelve a empezar tras la última parada — por eso un patrón de rayas rectas o diagonales cabe en una sola línea. Cuando quiere un borde duro en vez de un fundido, coloca el final de un color y el inicio del siguiente en el mismo píxel; el degradado se lee entonces como una frontera nítida entre bandas.

¿Qué es background-size?

background-size fija el tamaño de la caja en la que se pinta una capa de fondo, y es la propiedad que hace el verdadero trabajo de mosaico en un patrón. Un radial-gradient por sí solo dibuja un único punto; meta ese dibujo en una caja de 16 por 16 píxeles y deje que se repita por la superficie, y aparece un patrón de puntos regular. Cuando se apilan varias capas de fondo, los valores se escriben separados por comas en el orden de las capas, y si la lista es más corta que el número de capas se vuelve a leer desde el principio.

¿Qué es conic-gradient?

conic-gradient reparte sus paradas de color girando alrededor de un centro; hace sobre un ángulo lo que linear-gradient hace a lo largo de una recta y radial-gradient desde el centro hacia fuera. Un gráfico de tarta, una rueda de color o un tablero de ajedrez pueden escribirse con él en una sola línea. Aun así, esta herramienta construye su damero con dos capas de linear-gradient: la versión cónica, más corta, solo funciona en navegadores recientes, y el código generado aquí debe poder pegarse en cualquier parte sin riesgo.

¿Qué diferencia hay entre un patrón con degradado y un PNG repetible?

Un PNG repetible es una imagen pequeña dibujada de antemano que se estampa una y otra vez sobre la superficie: cuesta al navegador una descarga más, pierde nitidez en pantallas de alta densidad y cambiar su color exige regenerar el archivo. El patrón con degradado vive dentro de la hoja de estilos como una regla y el navegador lo dibuja al momento; es nítido en cualquier resolución, su color y su paso se cambian editando una línea y no añade peticiones. El PNG conserva la ventaja en un único terreno: las texturas irregulares y orgánicas. La fibra de un papel o el grano de una película no se escriben razonablemente con degradados.

¿Por qué dibujar el patrón con degradados y no con un PNG?

Un PNG repetible es un archivo más que la página debe descargar; se ve borroso en pantallas de alta densidad y cambiar su color obliga a generar la imagen de nuevo. Nada de eso pasa con un degradado: cambiar un color es editar una línea y el dibujo queda nítido en cualquier resolución.

Lo único que hay que vigilar es el moiré que aparece con pasos muy pequeños. Por debajo de 4 a 6 píxeles, el suavizado de bordes del navegador puede producir un parpadeo fino que parece ondular al desplazar la página. En patrones densos, quedarse en 8 píxeles o más es lo seguro.

¿Qué patrón sirve para qué?

Un patrón de fondo no debe dificultar la lectura del contenido; por eso la diferencia entre el color del patrón y el del fondo suele mantenerse pequeña a propósito.

• Rayas → franjas separadoras de secciones, paneles de estado vacío
• Rayas diagonales → la marca clásica de zonas desactivadas, en borrador o reservadas
• Cuadros (damero) → el indicador de transparencia conocido de los editores de imagen
• Puntos → fondo de página con textura ligera, reverso de tarjetas
• Cuadrícula → lienzo de dibujo, planos de distribución y fondos de boceto

Preguntas frecuentes

¿Dónde pego el CSS generado?

Añádalo tal cual a su hoja de estilos y asigne la clase del patrón al elemento que quiera. Puede renombrar la clase sin problema; mientras las declaraciones internas queden intactas, el patrón no se altera.

¿Qué cambia exactamente el paso del patrón?

El intervalo de repetición del motivo. En las rayas rectas y diagonales el paso es el grosor de una banda; en los puntos y la cuadrícula, la distancia entre dos centros; en el damero, el lado de un cuadrado.

¿Funcionan estos patrones en navegadores antiguos?

Sí. La salida usa la notación clásica de cuatro paradas de color en lugar de la abreviatura más reciente, y repeating-linear-gradient, radial-gradient y background-size llevan años soportados en todos los navegadores actuales.

¿Puedo descargar el patrón como imagen?

Esta herramienta produce CSS, no una imagen; el archivo descargado tiene extensión .css. Si el destino no admite degradados CSS — una plantilla de correo HTML, por ejemplo — necesitará preparar un PNG repetible.