Generador de degradados CSS: tres tipos y una vista previa grande
Elige un tipo, mueve las paradas y copia la línea de CSS. La página abre con un degradado de tres colores ya listo, así que no empiezas con un lienzo vacío. El generador escribe linear-gradient(), radial-gradient() o conic-gradient(), y añade repeating- si activas la repetición.
Qué escribe en cada caja de resultado
La primera caja tiene una línea: background: ...;. La segunda tiene dos: un background-color igual a la primera parada y un background-image con el degradado. El color sirve de reserva si un navegador no entiende el degradado. Los colores opacos salen como #rrggbb; con alfa menor que 100 salen como rgb(0 0 255 / 50%). En radial y cónico, el centro se escribe como at 50% 50% y no se indica tamaño, de modo que vale farthest-corner.
Cómo montar un degradado paso a paso
- Pulsa Lineal, Radial o Cónico. El lineal pide un ángulo de 0 a 360 grados; el radial, círculo o elipse y un centro; el cónico, un ángulo inicial y un centro.
- Edita las paradas: selector de color, campo hexadecimal, posición en porcentaje y alfa de 0 a 100.
- Con las flechas subes o bajas una parada, con la cruz la quitas y con Añadir parada se suma otra al final. Hay entre 2 y 8.
- Prueba Repartir por igual o Invertir paradas, o carga uno de los seis ajustes predefinidos.
- Pulsa Copiar en la caja que necesites.
Bordes duros, rayas y paradas desordenadas
Dos paradas en la misma posición no se mezclan: hacen un corte seco. El ajuste Rayas lo aprovecha, con bandas de 10 % que se repiten porque la última parada está en 20 %. Esa posición es la longitud de cada repetición.
La herramienta no ordena nada. Si una parada queda antes que una anterior, el navegador la lleva a la posición de esa anterior. Las posiciones se limitan a 0–100.
Qué no hace y qué pasa con tus datos
Solo acepta colores hexadecimales (#rgb o #rrggbb): ni nombres, ni hsl(). Hay una sola capa de degradado, sin puntos medios entre paradas y sin tamaño radial propio. Todo ocurre en tu navegador. Al editar o copiar no se envía ninguna petición ni se guarda nada, y al recargar vuelve el degradado inicial. Copiar escribe en el portapapeles; no hay descarga.
Preguntas frecuentes (FAQ)
rgb(r g b / 50%). La vista previa tiene un fondo de cuadros para que veas la transparencia.