CSS Gradient Generator
Create CSS gradients
Create CSS gradients Se ejecuta localmente en su navegador
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
El generador de degradado CSS crea un degradado lineal o radial real a partir de dos colores y un ángulo, lo muestra en tamaño completo y le entrega el CSS. El ángulo es la parte que la gente malinterpreta: en CSS, 0 grados apunta hacia arriba y la dirección gira en el sentido de las agujas del reloj, por lo que 90 grados va de izquierda a derecha y 180 grados va de arriba a abajo. Equivocarse es la razón por la que un degradado suele verse al revés la primera vez. Ambos colores pueden tener un valor alfa de ocho dígitos, que es la forma en que se desvanece un degradado sobre una imagen principal.
Where people use the
- Construyendo un fondo de héroe que se desvanece entre dos colores de marca.
- Probar qué ángulo se ve bien antes de comprometerse con él en el código.
- Producir un degradado vertical sutil para una tarjeta o un botón.
- Crear una superposición semitransparente que oscurece una fotografía.
How to use the
- 1
Elige los colores de inicio y fin.
Utilice el selector de color o escriba un valor hexadecimal. La vista previa y el CSS se actualizan a medida que los cambias.
- 2
Elija lineal o radial
Lineal recorre la caja en un ángulo elegido. Radial se extiende hacia afuera desde el centro como un círculo.
- 3
Establecer el ángulo
Arrastre el control deslizante de 0 a 360 grados. Recuerde 0 grados hacia arriba, 90 grados hacia la derecha, 180 grados hacia abajo, 270 grados hacia la izquierda.
- 4
Copia el CSS
La regla es una declaración de fondo que puedes pegar directamente en una hoja de estilo o en una propiedad de imagen de fondo si lo prefieres.
Consejos y mejores prácticas
- Prefiere una pequeña diferencia de luminancia para fondos que contengan texto; se lee como textura más que como distracción.
- Para texto sobre un degradado, verifique el contraste en los puntos más claros y más oscuros, no solo en el promedio.
- Mantenga las pendientes a dos o tres paradas; más tiende a verse turbio.
Preguntas frecuentes
¿Hacia dónde apunta el ángulo?
Los cero grados apuntan hacia la parte superior del elemento y el ángulo aumenta en el sentido de las agujas del reloj. Entonces 90 grados van hacia la derecha y 180 grados van hacia abajo. Esto es contrario a la intuición si estás acostumbrado a medir ángulos matemáticos en sentido antihorario desde la derecha.
¿Por qué mi degradado se ve con bandas?
Porque dos colores con luminancia similar producen pasos visibles en una pantalla de 8 bits, especialmente en un área grande. Agregar un tercer punto sutil o usar un rango de luminancia ligeramente más amplio generalmente lo oculta.
¿Puedo usar transparencia?
Sí. Utilice un valor hexadecimal de ocho dígitos como 667eea00 para totalmente transparente o 667eea80 para mitad, y el degradado se desvanecerá sobre lo que se encuentre detrás de él.
¿Se admite el gradiente en todas partes?
Los degradados lineales y radiales son compatibles con todos los navegadores actuales sin prefijo. Los prefijos de proveedores solo son necesarios para versiones muy antiguas de Safari y Android, lo que en la práctica significa que no se creó nada después de 2015.
¿Por qué no aparece mi gradiente?
Porque el elemento no tiene altura. Se pinta un degradado en el cuadro del elemento, por lo que un div vacío colapsa a una altura cero y no muestra nada. Establece una altura o agrega contenido.
¿Genera más de dos paradas de color?
No, esta herramienta maneja dos. Para un gradiente de múltiples paradas, tome el CSS que produce y agregue paradas a mano; la sintaxis es simplemente más pares de colores y porcentajes separados por comas.