Generador de gradiente CSS
Opciones
Vista previa en vivo
Acerca del generador de degradado CSS
Esta herramienta le ayuda a generar y analizar gradientes lineales y radiales de CSS.
Es útil para el diseño de interfaces de usuario, páginas de destino, fondos, botones, tarjetas y experimentos visuales de CSS.
Cómo utilizar la herramienta
- Elija degradado lineal o radial.
- Establezca ángulos, colores y posiciones de parada.
- Vea la actualización de vista previa en vivo al instante.
- Copie el CSS generado cuando se vea bien.
- O pegue un degradado existente en la entrada y haga clic en Analizar.
Consejos
- Los degradados lineales son útiles para botones, tarjetas y fondos de héroes.
- Los degradados radiales son útiles para efectos de brillo, focos y fondos suaves.
- Cambiar las posiciones de las paradas puede hacer que la transición sea más suave o más nítida.
- El fuerte contraste entre colores hace que los degradados sean más dramáticos.
Comprobaciones de gradientes CSS antes de usar transiciones
La calidad depende del espacio de color, posición de stops, repetición, contraste y dimensiones de la caja.
Inspecciona las transiciones
Revisa banding, puntos medios sucios, transparencia sobre fondos, colores wide-gamut e interpolación.
Verifica stops y dirección
Prueba posiciones, hard stops, ángulos, centros radiales, size keywords y límites repetidos.
Protege el contraste
Mide texto, iconos, borders y focus indicators sobre la zona más débil del gradiente en cada tema.
Prueba tamaños reales
Revisa cajas estrechas, altas, fluidas, high-density, con zoom e impresión porque la geometría sigue la caja.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.