Generador de Gradientes CSS
Generador de gradientes CSS gratuito online, vista previa en tiempo real
Tipos de gradientes CSS
Los gradientes lineales hacen la transicion de colores a lo largo de una linea recta definida por un angulo o direccion. Los gradientes radiales hacen la transicion desde un punto central hacia afuera en forma circular o eliptica. Ambos soportan multiples paradas de color para transiciones complejas entre tres o mas colores.
Como crear un gradiente CSS
Selecciona el tipo de gradiente (lineal o radial), elige los colores de inicio y fin, y ajusta el angulo para gradientes lineales. La herramienta genera el codigo CSS instantaneamente. Copia el CSS y pegalo en tu hoja de estilos como propiedad background o background-image.
▶Puedo usar mas de dos colores en un gradiente?
Si, los gradientes CSS soportan paradas de color ilimitadas. Agrega colores adicionales modificando el codigo CSS generado con valores de color extra separados por comas.
▶Cual es el soporte de navegadores para gradientes CSS?
Los gradientes CSS son soportados en todos los navegadores modernos. Para navegadores antiguos, puedes necesitar prefijos de proveedor (-webkit-gradient) o un color de respaldo solido.
▶Puedo usar transparencia en gradientes?
Si. Usa valores de color rgba() o hsla() para incluir transparencia. Por ejemplo, linear-gradient(135deg, rgba(255,0,0,0.5), transparent) crea un gradiente rojo semitransparente.