DevFree Tools
Diseño CSS

Generador de Gradientes CSS

Diseña degradados lineales, radiales y cónicos con previsualización en tiempo real y copia el CSS al instante.

Presets

0%
100%
background: linear-gradient(to right, #2563eb 0%, #7c3aed 100%);

Ejemplos de uso

/* Fondo de elemento */

.hero { background: linear-gradient(to right, #2563eb 0%, #7c3aed 100%); }

/* Texto degradado */

.titulo { background: linear-gradient(to right, #2563eb 0%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Gradientes CSS: guía de uso para diseño web moderno

Los gradientes CSS reemplazaron hace años a las imágenes de fondo degradado, eliminando peticiones HTTP adicionales y permitiendo ajustes dinámicos sin editar archivos de imagen. Hoy son esenciales en cualquier diseño web moderno: fondos de hero sections, botones, textos decorativos y overlays sobre imágenes.

Usos más habituales

  • Hero sections: Fondo degradado para el área principal de la web.
  • Textos decorativos: Títulos con degradado usando background-clip: text.
  • Botones: Gradiente sutil que aporta profundidad sin ser invasivo.
  • Overlays: Degradado semitransparente sobre imágenes para mejorar legibilidad del texto.
  • Bordes degradados: Con border-image para efectos llamativos.

Preguntas frecuentes

¿Cuál es la diferencia entre linear-gradient y radial-gradient? ▼

linear-gradient crea una transición de color en línea recta, en la dirección que especifiques (horizontal, vertical o diagonal). radial-gradient crea una transición que irradia desde un punto central hacia fuera, como los anillos de una diana.

¿Cómo hago un texto con degradado en CSS? ▼

Aplica el gradiente como background del texto y luego usa background-clip: text junto a -webkit-text-fill-color: transparent. Ejemplo: .titulo { background: linear-gradient(to right, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

¿Los gradientes CSS son compatibles con todos los navegadores? ▼

Sí. linear-gradient y radial-gradient tienen soporte universal desde hace años (Chrome 26+, Firefox 16+, Safari 7+). conic-gradient es más reciente pero también está soportado en todos los navegadores modernos desde 2021.

Herramientas relacionadas

🎨

Conversor de Colores

Convierte colores entre HEX y RGB con previsualización en tiempo real.

🎨

CSS Formatter

Formatea CSS desordenado o minifica tus hojas de estilo para reducir su peso.

🖼️

Conversor de Imágenes

Convierte imágenes entre JPG, PNG y WEBP sin pérdida de calidad. 100% local, sin servidores.