Preview
CSS
Controles
Ajustes preestablecidos
degradado
Explora estos impresionantes ejemplos de degradado e inspírate para tu próximo proyecto. Haga clic en cualquier degradado para cargarlo en el generador.
Sunset Blush
Un degradado cálido inspirado en hermosas puestas de sol.
Ocean Breeze
Un gradiente tranquilo que evoca la sensación de las aguas costeras.
Mint Fusion
Un degradado fresco y moderno que combina menta y azul cielo.
Lush Garden
Un degradado vibrante que representa la belleza de la naturaleza.
Sueño Cósmico
Un degradado mágico inspirado en el cielo nocturno.
Hora Dorada
Un degradado cálido que captura la esencia del crepúsculo.
Documentación de Gradiente ¿Qué
son los degradados CSS?
Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores. Se pueden usar como fondos para elementos y vienen en tres tipos diferentes:
- Degradados lineales:Colores de transición a lo largo de una línea recta.
- Degradados radiales:Colores de transición desde un punto central hacia afuera.
- Degradados cónicos:Colores de transición alrededor de un punto central en un círculo.
Cómo usar los degradados
Una vez que hayas generado un degradado con nuestra herramienta, puedes usar el código CSS en tus proyectos:
- Copia el código CSS del generador.
- Pégalo en tu archivo CSS o úsalo en línea en tus elementos HTML.
- Aplique el degradado a cualquier elemento usando los
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Utilice más de dos colores para obtener un efecto de degradado más complejo.
- Ajuste las posiciones de color para controlar dónde se producen las transiciones.
- Combina varios degradados para obtener efectos aún más creativos.
- En el caso de los degradados cónicos, al cambiar el centro se crean patrones interesantes.
- Guarde sus degradados favoritos para usarlos más tarde.
Compatibilidad con
navegadores Los degradados CSS son ampliamente compatibles con los navegadores modernos. Sin embargo, es posible que los navegadores más antiguos, como Internet Explorer, no los representen correctamente. Proporcione siempre un color de reserva:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Acerca de esta herramienta
Nuestro generador de degradados CSS está diseñado para ayudar a los desarrolladores y diseñadores a crear hermosos degradados sin esfuerzo. Ya sea que esté trabajando en un sitio web, una aplicación o simplemente quiera experimentar con colores, esta herramienta facilita la generación del degradado perfecto para su proyecto.
Features
Fácil de usar
Interfaz intuitiva para crear degradados.
responsivo
funciona perfectamente en todos los tamaños de pantalla.
copiar y pegar
Obtén código CSS limpio al instante.
Ajustes preestablecidos disponibles
Comience con hermosos degradados predefinidos.
Related Tools
Generador de transiciones CSS3
Transición de opacidad suave
Crea hermosos degradados CSS sin esfuerzo
Genera impresionantes degradados lineales, radiales y cónicos con nuestra interfaz intuitiva. Copia el código CSS y utilízalo en tus proyectos al instante.
Convertidor de Less a CSS
Transforme su código Less en CSS. Rápido, fácil y seguro.
Convertir JSON a texto sin esfuerzo
Transforme sus datos JSON en texto sin formato con un solo clic. Rápido, seguro y completamente basado en el navegador.
Texto a octal
Convierta texto a representación octal sin esfuerzo.
Convertidor de ritmo
Convierta fácilmente el ritmo de carrera entre diferentes unidades y calcule el tiempo y la distancia estimados