Generador de Degradados Repetidos
Crea patrones CSS con repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient() al instante y gratis. Elige entre 6 estilos de patrón integrados (Rayas, Zigzag, Tablero de ajedrez, Lunares, Rombos o Personalizado), selecciona dos colores, ajusta el tamaño del patrón y el desplazamiento de mosaico, y obtén una salida CSS lista para producción con un clic. Totalmente privado y sin registro.
Pattern Style
Color 1
#6366f1
Color 2
#6366f1
Gradient Type
Pattern Size
Spacing & Offset
Tile Preview (3× tiles)
background: repeating-linear-gradient(to right, #6366f1 0%, #6366f1 40%, #ec4899 40%, #ec4899 100%);
¿Por Qué Usar Nuestro Generador de Degradados Repetidos?
- 6 estilos de patrón integrados: elige entre Rayas, Zigzag, Tablero de ajedrez, Lunares, Rombos o patrones Personalizados. Cada estilo configura automáticamente las posiciones ideales de las paradas de color y el tipo de degradado, o cambia al modo Personalizado para tener control manual total.
- Vista previa en mosaico en vivo y CSS instantáneo: el generador de degradados repetidos actualiza la vista previa en vivo y la salida CSS con cada cambio. Ve exactamente cómo se repite tu patrón por el área de vista previa y copia CSS listo para producción con un clic.
- 100 % privado - sin subidas: toda la generación de degradados ocurre localmente en tu navegador. Tus colores y patrones nunca salen de tu dispositivo y nunca se envían a ningún servidor. Seguro para proyectos de clientes y sistemas de diseño propietarios.
- Gratis y sin límites: genera degradados repetidos ilimitados sin registro, sin suscripción y sin límites de uso. El generador de degradados repetidos es totalmente gratuito para siempre y sin anuncios que bloqueen la interfaz.
Casos de Uso Habituales de los Degradados Repetidos
- Patrones de fondo para sitios web: los diseñadores web usan el generador de degradados repetidos para crear patrones de fondo sin costuras para secciones hero, bloques de contenido y separadores de página. Los degradados repetidos cargan más rápido que los archivos de imagen y escalan perfectamente en cualquier resolución.
- Tablas y listas rayadas en CSS: los desarrolladores front-end usan repeating-linear-gradient para crear filas de tabla a rayas (tipo cebra), fondos alternos de listas y patrones de línea de tiempo. Copia el CSS directamente en tu hoja de estilos con un clic.
- Tokens de patrón para sistemas de diseño: los equipos de sistemas de diseño usan el generador de degradados repetidos para definir tokens de patrón para fondos decorativos, estados de carga y elementos de marcador de posición. El constructor visual facilita alinear los patrones con los colores de marca.
- Gráficos para redes sociales y marketing: los especialistas en marketing y creadores de contenido usan el generador de degradados repetidos para crear fondos con patrones distintivos para publicaciones en redes sociales, infografías y cabeceras de correo electrónico. La biblioteca de preajustes ofrece puntos de partida instantáneos.
- Elementos decorativos de interfaz: los desarrolladores de UI usan degradados repetidos para barras de progreso, spinners de carga, bordes decorativos y texturas de fondo. Los degradados repetidos radiales y cónicos añaden efectos visuales únicos a los componentes de interfaz.
- Diseño de landing pages y CTA: los optimizadores de conversión usan el generador de degradados repetidos para crear fondos de CTA y separadores de sección que llaman la atención y hacen destacar las páginas, manteniendo tiempos de carga rápidos y sin solicitudes de imágenes.
¿Qué Es un Degradado CSS Repetido?
Un degradado CSS repetido es un degradado que mosaica o repite su patrón por todo el elemento usando las funciones repeating-linear-gradient(), repeating-radial-gradient() o repeating-conic-gradient(). A diferencia de los degradados normales, que se estiran por todo el elemento, los degradados repetidos crean patrones repitiendo la secuencia de paradas de color. Nuestro generador de degradados repetidos construye patrones repetidos sin costuras de forma visual y genera CSS listo para producción.
Cómo Funciona Nuestro Generador de Degradados Repetidos
- Elige un estilo de patrón: selecciona entre 6 estilos de patrón integrados (Rayas, Zigzag, Tablero de ajedrez, Lunares, Rombos o Personalizado) o empieza desde cero con el modo Personalizado para controlar cada parada de color.
- Configura colores y tamaño del patrón: elige dos colores con los selectores de color, ajusta el tamaño del patrón (longitud de repetición) y define el espaciado y el desplazamiento de mosaico. La vista previa en vivo se actualiza al instante, sin botón que pulsar.
- Copia el CSS: haz clic en «Copiar CSS» para copiar la declaración background: lista para producción en tu portapapeles. Pégala directamente en tu hoja de estilos.
Degradados Repetidos vs No Repetidos
- Los degradados normales se estiran de un borde del elemento al otro. Las paradas de color definen toda la transición y el degradado llena el elemento exactamente una vez, independientemente del tamaño del elemento.
- Los degradados repetidos mosaican el patrón de paradas de color por todo el elemento. El tamaño del patrón lo determinan las posiciones de tus paradas de color: la posición de la última parada fija la longitud del patrón. Los degradados repetidos son ideales para crear fondos rayados, patrones de tablero de ajedrez y texturas sin costuras sin archivos de imagen.
- Rendimiento: los degradados CSS repetidos los renderiza el navegador y no requieren ninguna solicitud de red, lo que los hace mucho más rápidos que los patrones basados en imágenes. Escalan infinitamente sin pixelarse y funcionan a cualquier resolución.
Tamaño del Patrón, Espaciado y Desplazamiento de Mosaico
El deslizador de Tamaño del patrón controla la longitud de un ciclo completo del patrón como porcentaje del contenedor. Un valor menor crea más repeticiones. La opción Espaciado inserta separación entre los mosaicos del patrón para un aspecto más definido. El Desplazamiento de mosaico desplaza los mosaicos siguientes horizontal o verticalmente, creando efectos escalonados como paredes de ladrillo o tableros de ajedrez desplazados. Estos controles te dan total libertad para adaptar el patrón repetido a tus requisitos exactos de diseño.
Preguntas frecuentes
Un degradado CSS repetido es un degradado que repite su patrón de paradas de color por todo un elemento usando las funciones repeating-linear-gradient(), repeating-radial-gradient() o repeating-conic-gradient(). A diferencia de los degradados normales, que se estiran una vez por todo el elemento, los degradados repetidos crean patrones sin costuras, como un papel pintado o un mosaico. Se definen por completo en CSS, no necesitan archivos de imagen y escalan infinitamente sin pixelarse.
Un degradado normal no repetido estira sus paradas de color por todo el elemento de borde a borde. Un degradado repetido mosaica el patrón definido por las paradas de color. La diferencia clave es que los degradados repetidos usan las posiciones de tus paradas de color para determinar el tamaño del patrón: la posición de la última parada define el tamaño de un mosaico. Todo lo que supere esa posición se repite desde el principio. Esto hace que los degradados repetidos sean perfectos para rayas, tableros de ajedrez y otros patrones en mosaico.
El generador de degradados repetidos ofrece 6 estilos de patrón: Rayas (rayas sólidas alternas en cualquier dirección), Zigzag (patrón de onda en zigzag), Tablero de ajedrez (cuadrados alternos), Lunares (puntos radiales repetidos), Rombos (patrón de rombos) y Personalizado (control manual total de todas las paradas de color y tipos de degradado). Cada estilo configura automáticamente las posiciones óptimas de las paradas de color y el tipo de degradado, pero siempre puedes cambiar a Personalizado para tener control total.
El deslizador de Tamaño del patrón controla el tamaño de un ciclo completo del patrón respecto al contenedor. Un porcentaje menor crea más repeticiones en la misma área (patrón más fino), mientras que un porcentaje mayor crea menos repeticiones y más grandes (patrón más grueso). Por ejemplo, al 25 % verías 4 repeticiones en el contenedor, al 50 % verías 2 repeticiones y al 100 % verías exactamente 1 ciclo completo del patrón.
Sí. Toda la generación de degradados ocurre 100 % en el lado del cliente, en tu navegador, con JavaScript. Tus elecciones de color y configuraciones de patrón nunca se envían a ningún servidor, nunca se almacenan y nunca se transmiten a ningún sitio. El generador de degradados repetidos es totalmente privado y seguro para proyectos de clientes.
Sí. Copia el valor del degradado (la parte dentro de la declaración background:, sin «background:») y úsalo en una clase de valor arbitrario de Tailwind: bg-[repeating-linear-gradient(to_right,#6366f1_0,#6366f1_40px,#ec4899_40px,#ec4899_80px)]. Sustituye los espacios por guiones bajos en los valores arbitrarios de Tailwind. Como alternativa, añade el degradado a tu tailwind.config.js bajo theme.extend.backgroundImage para reutilizarlo en todo el proyecto.
Los degradados lineales y radiales repetidos son compatibles con todos los navegadores modernos sin prefijos de proveedor. Los degradados cónicos repetidos son compatibles con Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. Para navegadores más antiguos (IE11 y anteriores), considera ofrecer un color sólido de reserva antes de la declaración del degradado.
Sí. El generador de degradados repetidos es 100 % gratuito, sin registro, sin funciones premium y sin límites de uso. Genera degradados repetidos ilimitados sin restricciones ni costes ocultos.