Generador de Gradientes CSS
Crea hermosos gradientes CSS visualmente y copia el código — lineal, radial y cónico.
Código CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Los degradados CSS son una de las herramientas de mayor valor en el diseño web: se renderizan como código puro, así que escalan a cualquier tamaño, no cuestan nada en peso de archivo y nunca se emborronan; un fondo degradado que sería un archivo de imagen pesado es en su lugar unas pocas líneas de CSS. Pero la sintaxis es engorrosa, la diferencia entre degradados lineales, radiales y cónicos es fácil de confundir, y escribir a mano las paradas de color es tedioso. Esta herramienta te deja construir un degradado visualmente y copia un CSS limpio y listo para usar, para que obtengas el rendimiento y la flexibilidad del código sin pelearte con la sintaxis a mano.
Cómo funciona la herramienta
Elige un tipo de degradado —lineal, radial o cónico— escoge tus colores y las posiciones de sus paradas, fija el ángulo o el centro, y previsualiza el resultado en vivo. La herramienta genera el CSS correspondiente, que copias directamente en tu hoja de estilos. Como un degradado es código, la salida escala a cualquier tamaño de elemento sin una imagen aparte, se mantiene nítida como una cuchilla en cada densidad de pantalla y añade esencialmente nada al peso de tu página. Todo corre en tu navegador.
Los tres tipos de degradado
linear-gradient(ángulo, color1, color2, ...)
los colores mezclan a lo largo de una línea recta
135deg es una diagonal común
radial-gradient(forma at posición, colores)
los colores mezclan hacia fuera desde un centro
conic-gradient(from ángulo at posición, colores)
los colores barren alrededor de un centro (tipo tarta)
Las paradas de color fijan dónde cae cada color: 0%–100%.Los tres tipos cubren trabajos distintos. Los degradados lineales mezclan a lo largo de una línea recta a un ángulo elegido y son el caballo de batalla para fondos y botones. Los radiales irradian hacia fuera desde un centro, ideales para focos, brillos y viñetas suaves. Los cónicos barren alrededor de un punto central como la esfera de un reloj, lo que los hace singularmente adecuados para gráficos de tarta, ruedas de color y ruletas de carga construidas en CSS puro. Elegir el tipo equivocado es la razón habitual de que un degradado no luzca como lo imaginabas: cada forma mezcla los colores en una trayectoria fundamentalmente distinta.
Lo que conviene saber sobre los degradados CSS
- 1Los degradados son código, así que escalan infinitamente y no pesan nada. A diferencia de un degradado guardado como imagen, un degradado CSS se renderiza a cualquier tamaño de elemento sin emborronarse, añade prácticamente nada al peso de la página y no necesita una petición de archivo aparte. Para cualquier mezcla de color suave, CSS es casi siempre la opción correcta frente a una imagen: más rápido, más nítido e infinitamente flexible.
- 2Controla las paradas de color para dar forma a la mezcla, no solo los colores. Dónde colocas cada parada determina cómo transiciona el degradado: paradas juntas crean una línea nítida, paradas separadas crean un desvanecido lento. Dos paradas del mismo color en posiciones distintas crean una banda sólida. Dominar la colocación de paradas es lo que separa un desvanecido plano de dos colores de un degradado rico e intencional.
- 3Superpón varios degradados para dar profundidad y textura. CSS permite varios degradados apilados como capas en un elemento, con la transparencia dejando que las capas inferiores se vean a través. Así construyen los diseñadores fondos de malla sutiles, patrones y efectos de iluminación enteramente en CSS: un único degradado plano es solo el punto de partida, no el techo.
- 4Añade un ángulo para la dirección; el valor por defecto puede no ser el que esperas. Un degradado lineal sin ángulo va de arriba abajo; 90deg va de izquierda a derecha; 135deg da la popular diagonal. Si un degradado luce orientado mal, el ángulo es casi siempre por qué. Fijarlo explícitamente en lugar de confiar en el valor por defecto evita la sorpresa de degradado más común.
- 5Vigila el contraste donde el texto se sitúa sobre un degradado. Un fondo degradado puede pasar una comprobación de contraste en un extremo y fallar en el otro, ya que el color cambia a lo largo de él. El texto sobre un degradado necesita suficiente contraste contra el punto más claro o más oscuro que solapa, no solo el promedio, o se vuelve ilegible en parte de su recorrido: comprueba el peor caso, no el medio.
Preguntas frecuentes
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Mezclan colores a lo largo de trayectorias distintas. Un degradado lineal transiciona a lo largo de una línea recta a un ángulo que eliges, el estándar para fondos y botones. Un degradado radial irradia hacia fuera desde un punto central, ideal para brillos, focos y viñetas. Un degradado cónico barre alrededor de un centro como las agujas de un reloj, lo que lo hace singularmente adecuado para gráficos de tarta, ruedas de color y ruletas en CSS. Elegir el tipo que coincide con la forma que quieres es el primer paso al resultado correcto.
¿Son los degradados CSS mejores que las imágenes de degradado?
Casi siempre, sí. Un degradado CSS es código, así que escala a cualquier tamaño sin emborronarse, añade esencialmente nada al peso de tu página, no necesita una descarga de archivo aparte y puede editarse cambiando una línea en lugar de reexportar una imagen. Un degradado guardado como imagen es más pesado, fijo en resolución y se emborrona al escalar. A menos que necesites una textura o efecto que CSS genuinamente no pueda producir, el degradado en código gana en rendimiento, nitidez y flexibilidad.
¿Cómo funcionan las paradas de color?
Una parada de color fija dónde a lo largo del degradado cae un color concreto, como un porcentaje del 0% al 100% o una longitud. Colocar las paradas juntas hace una transición nítida entre colores; separarlas hace un desvanecido lento y suave. Repetir el mismo color en dos posiciones crea una banda sólida de él. Controlar las paradas, no solo elegir los colores, es lo que te permite dar forma exactamente a cómo y dónde transiciona el degradado.
¿Por qué mi degradado va en la dirección equivocada?
Casi siempre el ángulo. Un degradado lineal sin ángulo especificado va por defecto de arriba abajo, lo que sorprende a quien espera una mezcla diagonal u horizontal. Fija el ángulo explícitamente —90deg para izquierda a derecha, 135deg para la diagonal común— para controlar la dirección. Si la orientación de un degradado luce mal, añadir o corregir el valor del ángulo es casi siempre la solución, ya que el valor por defecto rara vez es la dirección que la gente pretende.
¿Puedo usar degradados detrás de texto?
Sí, pero comprueba el contraste con cuidado, porque el color de fondo cambia a lo largo del degradado. Un texto legible sobre el extremo claro puede volverse ilegible sobre el extremo oscuro, ya que un único degradado abarca un rango de colores. Verifica que tu texto tenga suficiente contraste contra el punto más exigente que solapa —el área más clara o más oscura debajo de él— en lugar de asumir que el promedio es seguro. Para texto largo, un degradado más sutil o una superposición sólida detrás del texto suele ser más seguro.