Convertidor Gratuito

Generador de Gradientes CSS

Genera visualmente gradientes CSS con vista previa en vivo. Crea gradientes lineales, radiales y cónicos con paradas de color personalizadas — gratis y del lado del cliente.

Vista Previa en Vivo
Salida CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Ángulo (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Acerca de esta herramienta

Crea hermosos degradados lineales y radiales CSS con un editor visual. Elija colores, ajuste las paradas, cambie la dirección o el ángulo y vea la actualización de la vista previa en vivo en tiempo real. Copie el código CSS generado (incluidos los prefijos de proveedores para navegadores más antiguos) y péguelo directamente en su hoja de estilo.

Cómo usarla

  1. Elija el tipo de degradado: lineal o radial.
  2. Agregue paradas de color haciendo clic en la barra de degradado y seleccionando colores.
  3. Ajuste el ángulo del gradiente (lineal) o la posición (radial) usando los controles.
  4. Copie el código CSS generado desde el panel de salida.

Preguntas frecuentes

¿Los gradientes CSS funcionan en todos los navegadores?
Los degradados CSS modernos (degradado lineal, degradado radial) son compatibles con todos los navegadores actuales, incluidos Chrome, Firefox, Safari y Edge. Opcionalmente, la herramienta puede generar prefijos -webkit- para versiones anteriores del navegador.
¿Puedo crear degradados multicolores?
Sí. Añade tantas paradas de color como necesites. También puedes ajustar la posición de cada parada para controlar dónde se mezclan los colores. Esto permite gradientes complejos de arcoíris, atardeceres o marcas personalizadas.
¿Cuál es la diferencia entre gradientes lineales y radiales?
Los degradados lineales cambian los colores a lo largo de una línea recta (de arriba a abajo, de izquierda a derecha, en diagonal o en cualquier ángulo). Los degradados radiales hacen una transición de colores hacia afuera desde un punto central en una forma circular o elíptica.
¿Puedo utilizar el degradado como fondo para el texto?
Sí. Utilice background-clip: text con -webkit-text-fill-color: transparent para aplicar el degradado al texto. El CSS generado proporciona la definición del degradado; combínelo con estas propiedades para el texto degradado.