Generador de Degradados CSS
Construya un degradado lineal, radial o cónico y obtenga la línea de CSS, con el contraste entre los dos extremos.
Resultados
Qué hace esta herramienta
El CSS de un degradado es corto y fácil de errar por poco: el ángulo gira al revés de lo que uno espera, las paradas son porcentajes y el orden importa. Defina los colores y dónde quedan, y esta página escribe la línea por usted. También le dice el contraste entre los dos extremos, porque un degradado suele ser un fondo y el texto tiene que sobrevivir a todo su ancho.
Fórmula
escribe la línea de CSS con las paradas de color en el orden y los porcentajes dados
Variables
| Símbolo | Significado | Unidad |
|---|---|---|
kind | Tipo de degradado | — |
angle | Ángulo | ° |
color_1 | Primer color | — |
stop_1 | Dónde acaba el primero | % |
color_2 | Último color | — |
stop_2 | Dónde empieza el último | % |
color_3 | Un color en medio, si quiere | — |
stop_3 | Dónde queda el del medio | % |
OUT | El CSS | — |
VA | Solo el valor | — |
ST | Paradas de color | — |
CO | Contraste entre los dos extremos | :1 |
Ejemplo resuelto
- Tipo de degradadolinear
- Ángulo135 °
- Primer color#c9502f
- Dónde acaba el primero0 %
- Último color#17191f
- Dónde empieza el último100 %
- Un color en medio, si quiere
- Dónde queda el del medio50 %
- El CSSbackground: linear-gradient(135deg, #c9502f 0%, #17191f 100%);
- Solo el valorlinear-gradient(135deg, #c9502f 0%, #17191f 100%)
- Paradas de color2
- Contraste entre los dos extremos3,91 :1
Preguntas frecuentes
¿Hacia dónde apunta el ángulo?
Cero grados apunta hacia arriba, y el ángulo gira en el sentido de las agujas del reloj desde ahí: 90 va de izquierda a derecha, 180 va de arriba abajo, 270 va de derecha a izquierda. Esto pilla a mucha gente porque no es como funcionan los ángulos en la mayoría de los demás sitios, donde el cero apunta a la derecha y el giro va al revés. El comité de CSS lo eligió para que «180deg» se lea como «hacia abajo», que es como se lee en cuanto se sabe.
¿Para qué sirve la línea de contraste?
Porque un degradado es muchas veces un fondo con texto encima, y un texto que se lee en un extremo puede desaparecer en el otro. La cifra es el contraste entre los dos colores de los extremos: cuando es grande, ningún color de texto funciona en todo el ancho y hace falta un degradado más corto o un panel detrás de las palabras.