DevToolPal
ES

Generador de degradados CSS

Crea degradados CSS lineales, radiales y cónicos de forma visual con paradas de color, ángulo y posición, con vista previa en vivo, ajustes predefinidos y CSS listo para copiar.

Se ejecuta en local, nunca se sube

Degradado

Tipo
Paradas de color

Vista previa

CSS

Predefinidos
CSS del degradado
 
 
 
 
 
Qué hace


El generador de degradados CSS te permite diseñar un degradado a ojo y copiar el CSS final. Elige un degradado lineal, radial o cónico, añade tantas paradas de color como quieras, arrastra sus posiciones, ajusta el ángulo o el punto central y la vista previa se actualiza al instante. También puedes pegar un linear-gradient(…), radial-gradient(…) o conic-gradient(…) existente para editarlo visualmente. Todo se ejecuta en tu navegador.


Cómo se usa


    

  1. Empieza por un ajuste predefinido o conserva el degradado de ejemplo.
    2. 

  2. Elige el Tipo. Los degradados lineales y cónicos tienen ángulo; los radiales y cónicos tienen un centro que puedes mover con Centro X y Centro Y.
    3. 

  3. Edita las Paradas de color: cambia un color con el selector o escribe cualquier color CSS, arrastra Posición para moverla, usa + Añadir parada para insertar una en el hueco más amplio e Invertir para dar la vuelta al orden.
    4. 

  4. Activa Repetir para repetir el degradado en mosaico y crear rayas y anillos.
    5. 

  5. Copia el código de la tarjeta CSS, si quieres con un color sólido de respaldo para navegadores muy antiguos.
    6. 



El cuadro CSS del degradado de abajo muestra el valor del degradado y se puede editar: pega un degradado de tu hoja de estilos o de una herramienta de diseño y los controles lo recogen.


Ejemplo


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Consejos para buenos degradados


    

  • Mejor sutil. Dos tonos vecinos (azul a violeta, naranja a rosa) quedan más suaves que colores opuestos, que pueden volverse un gris turbio en el centro.
    • 

  • Añade una parada intermedia para controlar la mezcla. Una tercera parada algo más clara que sus vecinas da un brillo suave.
    • 

  • Las paradas duras crean formas. Paradas en la misma posición generan bordes nítidos: rayas, banderas, barras de progreso y gráficos circulares usan este truco.
    • 

  • Direcciones. to right equivale a 90deg y to bottom (el valor por defecto) a 180deg. Los ángulos se miden en sentido horario desde arriba.
    • 

  • El texto sobre degradados debe leerse bien en todo el degradado. Comprueba las paradas más clara y más oscura contra el color del texto con un comprobador de contraste.
    • 

 
  
 
Preguntas frecuentes
 
 
  › ¿Qué diferencia hay entre degradados lineales, radiales y cónicos?  
Un degradado lineal mezcla los colores a lo largo de una línea recta con un ángulo. Uno radial se expande desde un punto central en forma de círculo o elipse. Uno cónico gira alrededor de un punto central como las agujas de un reloj, ideal para ruedas de color y gráficos circulares.
 
  › ¿Cómo hago franjas nítidas en lugar de una transición suave?  
Pon dos paradas vecinas en la misma posición, por ejemplo red 50% y blue 50%. El color cambia de golpe en ese punto. Activa Repetir para que el patrón se repita: así se hacen las rayas en CSS.
 
  › ¿Puedo usar colores transparentes?  
Sí. Escribe cualquier color CSS en una parada, incluidos rgba(), hsl() con alfa, hexadecimal de 8 dígitos o transparent. El selector de color conserva el alfa y la vista previa muestra un damero detrás de las zonas transparentes.
 
  › ¿Siguen haciendo falta prefijos o un color de respaldo?  
No hacen falta prefijos: todos los navegadores actuales admiten degradados lineales, radiales y cónicos sin prefijo. El color sólido de respaldo opcional solo importa en navegadores muy antiguos o en herramientas que leen background-color, como algunos clientes de correo.