Generador de gradiente CSS

Todas las herramientas

Opciones

Parada de color 1
Parada de color 2
Parada de color 3
Estado
inactivo

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

  1. Elija degradado lineal o radial.
  2. Establezca ángulos, colores y posiciones de parada.
  3. Vea la actualización de vista previa en vivo al instante.
  4. Copie el CSS generado cuando se vea bien.
  5. 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.

Guías relacionadas

Aprenda el workflow detrás de esta herramienta y qué revisar después.

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.

Privacidad y uso

Comprobaciones rápidas sin cuenta

Toolinix está pensado para tareas cortas de desarrollo: pegue una muestra segura, revise el resultado, copie lo necesario y continúe.

Sin inicio de sesión

Puede usar las herramientas sin crear una cuenta, suscribirse a un boletín ni guardar un espacio de trabajo.

Local cuando es posible

Los formateadores, generadores, codificadores y utilidades de texto suelen ejecutarse en el navegador. Los diagnósticos de red pueden necesitar una consulta asistida por servidor para comprobar URLs, dominios o IPs públicos.

No pegue secretos

No pegue contraseñas de producción, claves privadas, tokens de acceso, datos de clientes ni datos regulados en herramientas online salvo que su propia política de seguridad lo permita.

Herramientas relacionadas

Estas herramientas también pueden resultarle útiles.

Preguntas frecuentes sobre el generador de degradado CSS

¿Qué es un gradiente CSS?
Un degradado CSS es una imagen generada por CSS que realiza una transición suave entre dos o más colores.
¿Esta herramienta admite gradientes lineales?
Sí. Puede generar y analizar gradientes lineales.
¿Esta herramienta admite gradientes radiales?
Sí. También puede generar y analizar gradientes radiales.
¿Puedo pegar un degradado existente?
Sí. Pegue una cadena de degradado CSS en el campo de entrada y haga clic en Analizar.