Saltar al contenido
arnaud.app

Generador de degradado repetido (rayas y patrones)

Generador de repeating-linear-gradient gratuito con vista previa en vivo. Crea rayas, barras y patrones de barbería a partir de paradas muy juntas - copia el CSS, sin registro.

Funciona en tu navegador

Un degradado repetido repite sus paradas una y otra vez en lugar de estirarlas por el elemento. Junta las paradas, ajusta el ángulo y obtienes rayas CSS nítidas, barras, cuadros o un patrón de barbería - todo generado en vivo como `repeating-linear-gradient()`. Sin imagen, sin petición HTTP extra.

background: repeating-linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);

Cómo usarla

  1. Elige un tipo o preajuste

    Lineal, radial o cónico (o una variante repetida), o carga un preajuste para partir de un buen acabado.

  2. Da forma al degradado

    Arrastra el ángulo, ajusta la forma y posición radiales, y edita las paradas en la barra - clic para añadir, arrastra un punto para mover.

  3. Afina el color

    Ajusta la opacidad de cada parada y activa OKLCH para mezclas más suaves y vivas entre colores saturados.

  4. Copia o comparte

    Copia el CSS `background` listo para usar, o usa Copiar enlace para compartir el degradado exacto.

¿Qué es?

Un degradado CSS es una mezcla suave e independiente de la resolución entre dos o más colores, dibujada por el navegador sin archivo de imagen. Este generador construye la función completa `linear-gradient()`, `radial-gradient()` o `conic-gradient()` (y sus variantes repetidas) a partir de una lista de paradas - cada una con color, posición y opacidad. Al ser CSS puro, un degradado se adapta a cualquier tamaño, casi no cuesta renderizar y nunca se pixela.

Cuándo usarla

Usa un degradado cuando quieras profundidad sin el peso de una imagen: fondos de hero y secciones, brillos de botones y tarjetas, superposiciones tipo cristal, acentos de marca, superficies en modo oscuro o un fundido de una foto al color de la página. Los degradados cónicos sirven de gráficos circulares, ruedas de color y spinners; los repetidos crean rayas, cuadrículas y patrones.

Errores comunes

Amontonar paradas recarga el degradado - dos o tres suelen bastar. Mezclar complementarios saturados (rojo a verde) en sRGB da un centro turbio; añade un punto neutro o activa OKLCH. No olvides un `background-color` de respaldo para el raro navegador que no entienda tu sintaxis, y recuerda que los degradados muy sutiles pueden desaparecer en pantallas de baja calidad.

Preguntas frecuentes

¿Qué diferencia hay entre degradado lineal, radial y cónico?
Un degradado lineal mezcla los colores a lo largo de una línea recta, según un ángulo. Un degradado radial irradia desde un centro, en círculo o elipse. Un degradado cónico gira los colores alrededor de un punto, como la aguja de un reloj - ideal para ruedas de color y gráficos circulares. Esta herramienta genera los tres, más sus variantes repetidas.
¿Por qué mi degradado se ve con bandas o turbio en el centro?
Por defecto CSS mezcla los colores en sRGB, lo que puede dar un centro oscuro y turbio entre dos colores saturados. Activa OKLCH y la herramienta emite `linear-gradient(in oklch, ...)`, que mezcla en un espacio perceptualmente uniforme para transiciones más suaves y vivas en navegadores modernos.
¿Puedo añadir transparencia?
Sí. Cada parada tiene un control de opacidad; por debajo del 100 % la herramienta la expresa como color `rgba()`. Desvanecer un degradado a transparente es el truco tras las superposiciones de imagen, los fundidos « leer más » y los separadores suaves.
¿Cuántas paradas de color puedo usar?
Las que quieras - haz clic en la barra o en « Añadir parada » y arrastra los puntos para recolocarlos. Dos o tres paradas suelen quedar mejor; demasiadas y muy juntas hacen que el degradado parezca recargado.
¿Qué controla el ángulo?
En los degradados lineales, el ángulo marca la dirección de la mezcla: 0° hacia arriba, 90° a la derecha, 180° hacia abajo. En los cónicos, marca dónde empieza el giro. Los radiales no tienen ángulo - controlas la forma y la posición del centro.
¿Cómo hago rayas o un borde duro en lugar de una mezcla suave?
Da la misma posición a dos paradas (ambas al 50 %, por ejemplo) y el color cambia de golpe, sin mezcla: es una parada dura. Usa un degradado lineal repetido con paradas muy juntas para crear rayas, cuadros o un patrón de barbería.
¿Puedo usar la salida con Tailwind o como background-image?
La herramienta produce un valor `background:` estándar. Úsalo tal cual, o pásalo a `background-image` cuando quieras también un `background-color` de respaldo. En Tailwind, métela en un valor arbitrario como `bg-[linear-gradient(...)]`.

Generador de degradados CSS

Degradados CSS lineales, radiales y cónicos con vista previa en vivo, preajustes y copia en un clic.

Probar →

Más en esta categoría