Generador de degradados CSS

Funciones

• Degradados lineales, radiales y cónicos
• Ángulo ajustable de 0 a 360, que gobierna tanto el lineal como el cónico
• Los dos colores de los extremos se eligen con selectores, sin escribir valores a mano
• Parada intermedia opcional, con posición ajustable del 0 al 100%
• Cada cambio vuelve a dibujar la previa al instante, sin botón de generar
• Debajo aparece la regla CSS lista para copiar, con el selector `.gradient`
• El código lleva coloreado de sintaxis y un botón de copiar
• La previa va sobre un fondo de tablero, para ver de un vistazo la translucidez y los bordes
• Los colores y el ángulo están validados: el CSS que sale siempre es válido
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige primero el tipo: lineal, radial o cónico
2. Arrastra el ángulo y abre los selectores para elegir los dos colores; la previa cambia al momento
3. Si quieres una transición de tres colores, marca «parada intermedia» y ajusta su color y su posición
4. Cuando te convenza, pulsa el botón de copiar de la esquina y llévate el CSS

Preguntas frecuentes

¿Cuándo conviene cada uno de los tres tipos?

El lineal es el más general: relleno de botones, brillo de tarjetas, fondos de página por capas — el ángulo manda la dirección (`90deg` de izquierda a derecha, `0deg` de abajo arriba). El radial va bien para todo lo que tiene un centro: un foco, el brillo de una esfera, un resplandor que se desvanece hacia fuera. El cónico reparte el color alrededor de un centro, y por eso es la vía más cómoda para un anillo de progreso, una rueda de matiz o un gráfico de tarta: se olvida mucho, pero si lo que quieres es color repartido por ángulo, es el único que lo hace.

¿Cómo se mide el ángulo y por qué 0 no es de izquierda a derecha?

El `0deg` de CSS apunta hacia arriba (de abajo arriba) y el ángulo crece en sentido horario: `90deg` es de izquierda a derecha, `180deg` de arriba abajo y `270deg` de derecha a izquierda. Ese origen tiene que ver con el sistema de coordenadas de CSS (el eje y crece hacia abajo, pero el ángulo del degradado sigue la convención matemática). También puedes usar palabras clave (`to right`, `to bottom right`); su diferencia con un ángulo fijo está en la adaptabilidad: la palabra clave ajusta el ángulo según la proporción del elemento para cruzar la diagonal, y el ángulo fijo no.

¿Qué pasa en el CSS cuando desactivo la parada intermedia?

Pues que se omite por completo, en lugar de dejar una parada vacía "al 50%, del mismo color que los extremos". Esa parada vacía parece hacer algo en el código cuando no afecta a nada y, además, luego da miedo borrarla. Así que aquí, si no la marcas, en el código solo hay dos paradas. Lo que ves en la previa y lo que copias son siempre el mismo código, y de eso se encarga la garantía del armazón (cada declaración aplicada a la previa tiene que aparecer en el CSS entregado).

¿Puedo usar los colores del degradado para otra cosa?

Sí: los valores de los extremos son hexadecimales normales, así que al copiarlos puedes trabajar con ellos. Para sacar toda una paleta a partir de uno de ellos (monocromática, complementaria, triádica…), usa esquemas de color; para inspirarte entre 180 degradados ya hechos, usa colores de degradado. Las dos complementan a esta: aquí montas un degradado desde cero, allí eliges de una biblioteca.