Utilore

Generador de degradados CSS

Mueve los controles y observa cómo cambia el panel de arriba. Cuando te guste, copia la línea y pégala en tu hoja de estilos: no hace falta nada más.

El ángulo se aplica a los degradados lineales y cónicos; el radial se expande desde el centro.

Paradas de color

    Cómo usarlo

    1. Elige el tipo: el lineal sigue una recta, el radial se expande desde el centro, el cónico gira a su alrededor.
    2. Ajusta el ángulo y mueve las paradas hasta donde deban encontrarse los colores.
    3. Añade más paradas si dos colores no bastan, o pulsa «Sorpréndeme».
    4. Copia la línea CSS que hay bajo la vista previa.

    Lo que conviene saber

    Por qué la vista previa está sobre un tablero de ajedrez

    Un degradado suele terminar en un color transparente, y sobre un panel blanco liso eso se ve igual que uno opaco. El tablero se transparenta allí donde el color no es sólido, así que lo que configuras es lo que ves: una costumbre tomada de los editores de imagen justo por esta razón.

    Las paradas se ordenan antes de escribir el código

    CSS no reordena las paradas por ti: una parada al 70 % escrita antes que otra al 30 % obliga al navegador a fijar la segunda, y el degradado pierde un color en silencio. La herramienta ordena las paradas por posición al construir la línea, de modo que arrastrar un control más allá de su vecino nunca rompe el resultado.

    Preguntas frecuentes

    ¿Cuál es la diferencia entre los tres tipos?

    El degradado lineal recorre una recta y admite un ángulo: 90deg va de izquierda a derecha, 180deg de arriba abajo. El radial se expande en círculos desde el centro, ideal para resplandores y focos. El cónico gira alrededor de un punto como la aguja de un reloj, y con él se construyen los gráficos circulares y las ruedas de color.

    ¿Cómo hago un degradado con transparencia?

    Elige un color y baja su opacidad en el selector si tu navegador ofrece alfa, o edita a mano la línea copiada: rgba(31, 95, 214, 0) sirve como parada igual que un color sólido. Un desvanecido a transparente es más útil que uno a blanco, porque funciona sobre cualquier fondo.

    ¿Puedo usarlo como color de texto?

    Sí, con dos líneas más: pon el degradado en background-image y añade background-clip: text y color: transparent. El texto conserva su forma y el degradado se ve a través de las letras.

    ¿Por qué el mismo ángulo se ve distinto en modo radial?

    Allí no se aplica en absoluto. Un degradado radial parte del centro y no tiene dirección, así que el ángulo queda para los modos lineal y cónico, donde decide dónde empieza el barrido.

    Herramientas relacionadas