🌈 Generador de Gradientes CSS

Edita gradientes linear, radial y conic. Anade o quita paradas de color y copia el codigo CSS.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Sobre la privacidad

・Todo en el navegador
・Tus datos nunca se envían a ningún servidor
・Sin registros, sin historial, sin base de datos
・Sin registro, sin inicio de sesión, sin pago

Tipo

Angulo (90deg)

Paradas de color

Preajustes

CSS

📖 Dónde se suele tropezar

Edita degradados linear, radial y conic de forma visual y exporta CSS listo para pegar. Lo que sale es la interpolación sRGB por defecto, en la que el navegador une dos colores repartiendo por igual los canales rojo, verde y azul. No es así como el ojo lee una rampa de color: los puntos medios apagados y el bandeado visible vienen ambos de este único hecho.

Caso	Qué ocurre	Qué hacer
Aparece una franja grisácea en el centro	Unir dos colores opuestos en la rueda cromática, como azul y amarillo, vacía la saturación en el centro. La interpolación lineal en sRGB sitúa el punto medio de `rgb(0 0 255)` y `rgb(255 255 0)` en `rgb(128 128 128)`: gris exacto. También explica que la herramienta de diseño y el navegador no coincidan: Figma o Illustrator pueden estar interpolando en otro espacio de color.	Lo más fiable es añadir una parada de color en el centro: para azul a amarillo, un verde o un cian intermedio recorre la rueda y queda natural. Cuando el soporte lo permita, nombrar el espacio de interpolación es la respuesta correcta: `linear-gradient(in oklch 90deg, blue, yellow)`, ya que `oklab` y `oklch` mantienen la luminosidad perceptualmente uniforme y no enturbian. Ojo: Safari por debajo de 16.2 y los WebView de Android antiguos descartan la declaración entera y te dejan sin fondo, así que escribe primero la versión sRGB y sobrescríbela.
Se ve bandeado cuando el degradado cubre mucha superficie	Cada canal tiene 256 pasos, de 0 a 255. Extiende un degradado de poco contraste a lo ancho de 1920px y cada paso mide entre 7 y 8 píxeles, suficiente para que las uniones se lean como líneas. Es peor en los colores oscuros: el ojo es más sensible a las diferencias en esa zona, justo donde la codificación sRGB reserva menos pasos. Los fondos de cabecera y las capas de los modales son donde más se nota.	Superponer un ruido muy tenue es el remedio habitual: coloca encima un PNG transparente de 100 a 200 píxeles al 2 o 4 por ciento de opacidad, como en `background-image: url(noise.png), linear-gradient(...)`, y los bordes de los escalones se dispersan hasta desaparecer. Incrustar un `feTurbulence` de SVG como data URI evita una petición de imagen. La otra palanca es acortar el recorrido: limitar el degradado a unos 300px de alto en vez de a pantalla completa elimina casi todo. Añadir más paradas de color no sirve, porque el problema es cuántos pasos hay disponibles.
El aspecto cambia al redimensionar el elemento	El valor por defecto de `radial-gradient` es `ellipse farthest-corner`: se reescala cada vez para estirarse hasta la proporción de la caja y terminar su último color en la esquina más lejana. Lo que en una tarjeta era un círculo limpio se vuelve una elipse achatada en una cabecera ancha y alargada en móvil. `conic-gradient` se comporta igual: un gráfico circular en una caja no cuadrada sale ovalado. Las paradas expresadas en `%` sufren lo mismo, porque el porcentaje se mide contra el elemento.	Para que siga siendo circular, escribe explícitamente `radial-gradient(circle at center, …)`. La forma final también admite `closest-side`, `farthest-side` o `closest-corner`; cuando no quieras que dependa del ancho del elemento, un tamaño absoluto como `circle 200px at center` es lo más predecible. Para un gráfico circular con `conic-gradient`, acompáñalo de `aspect-ratio: 1`. Comprueba siempre arrastrando de verdad el ancho del navegador: una vista previa de ancho fijo nunca destapará este tipo de rotura.

Un degradado es un background-image, no un background-color. Escribir el atajo background: linear-gradient(...) reinicia cualquier background-color a transparent y se lleva por delante tu color de reserva, así que declara background-color antes, en su propia línea. Segundo: nunca fundas hacia la palabra clave transparent; en sRGB equivale a rgba(0,0,0,0), es decir negro transparente, de modo que de blanco a transparent se pasa por el gris. Funde el mismo color bajando el alfa a cero, como en rgb(255 255 255 / 0). Por último, los navegadores omiten las imágenes de fondo al imprimir por defecto: un titular en blanco sobre un degradado se imprime como texto blanco sobre papel blanco y desaparece.

📖 Cómo usar

1

Elige un tipo

Elige linear, radial o conic.
2

Edita las paradas de color

Elige colores y ajusta posiciones. Anade o quita paradas.
3

Copia el CSS

Copia el CSS generado y pegalo en background.

❓ Preguntas frecuentes

¿Se envian mis datos al servidor?

No. Todo se ejecuta en tu navegador.

¿Cual es el soporte de navegador?

linear y radial en todos los navegadores modernos. conic en Chrome 69+ etc.

¿Cuantas paradas puedo anadir?

Sin limite. En la practica 2 a 10.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.