CSS Gradient Generator

Acerca de esta herramienta

El Generador de Gradientes CSS crea gradientes multicolor suaves que puedes pegar directamente en tu CSS. Soporta gradientes lineales (direccionales) y radiales (circulares) con cualquier número de paradas de color.

Las paradas de color definen dónde comienza y termina cada color a lo largo del eje del gradiente. El control deslizante de ángulo rota los gradientes lineales de 0° a 360°.

Cómo usar

1. Selecciona el tipo de gradiente: Lineal o Radial.
2. Para gradientes lineales, arrastra el control de ángulo para establecer la dirección.
3. Haz clic en un color para cambiarlo y arrastra el control para ajustar la posición.
4. Haz clic en + Añadir parada para agregar más paradas. Haz clic en ✕ para eliminar.
5. Haz clic en Copiar para copiar la declaración CSS background.

Casos de uso

Los diseñadores web crean fondos para secciones hero con gradientes CSS en lugar de imágenes. Los equipos de marca generan paletas de gradientes que coinciden con las directrices de color corporativas. Los desarrolladores prototipen tarjetas, botones y superposiciones con rellenos de gradiente.

Preguntas frecuentes

• ¿Cuál es la diferencia entre gradientes lineales y radiales? — Un gradiente lineal transiciona colores a lo largo de una línea recta en un ángulo dado. Un gradiente radial irradia colores hacia afuera desde un punto central.
• ¿Puedo usar más de dos colores? — Sí. Haz clic en + Añadir parada para agregar tantas paradas de color como necesites.
• ¿El CSS generado es compatible con todos los navegadores? — Sí. Las funciones linear-gradient() y radial-gradient() son totalmente compatibles en todos los navegadores modernos sin prefijos de proveedor.