Generador de Gradiente CSS
Construye hermosos gradientes CSS visualmente con vista previa en vivo. Soporta gradientes lineales y radiales con colores personalizados y ángulos.
Cómo Crear un Gradiente CSS
- 1Elige el tipo de gradiente: Lineal o Radial
- 2Elige tus colores de inicio y fin con los selectores de color
- 3Ajusta el ángulo (para lineal) o la dirección
- 4Copia el código CSS y pégalo en tu hoja de estilos
Ventajas
- Selectores de color visuales para un diseño intuitivo
- Vista previa del gradiente en vivo
- Genera código CSS limpio y compatible con todos los navegadores
- Soporta gradientes lineales y radiales
Preguntas Frecuentes
¿Qué propiedad CSS se genera?
La herramienta genera una declaración CSS de background usando linear-gradient() o radial-gradient(). Puedes usarla en cualquier elemento que acepte un background: en un hero de página completa, sobre el elemento body o una sección; en un botón, sobre el propio botón; en una tarjeta, sobre el contenedor. background-image: también funciona y te permite combinarlo con un background-color de reserva.
¿Cómo añado más de 2 paradas de color?
Esta herramienta genera gradientes de 2 paradas. Para añadir más, copia la salida y extiéndela manualmente. Por ejemplo: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899) transiciona por tres colores. También puedes añadir posiciones en porcentaje para controlar dónde aterriza cada parada: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%).
¿Los gradientes CSS son compatibles con todos los navegadores?
linear-gradient() y radial-gradient() están soportados en todos los navegadores modernos y llevan así muchos años. No se necesitan prefijos de proveedor para las versiones actuales. Si necesitas dar soporte a navegadores muy antiguos, un background-color sólido de reserva antes de la declaración del gradiente ofrece una experiencia degradada razonable.
¿Cuándo debo usar un gradiente frente a un color sólido?
Los gradientes añaden profundidad y movimiento visual a fondos, secciones hero, botones y tarjetas: útiles cuando quieres guiar la mirada o dar energía a un diseño. Úsalos con fines decorativos, no funcionales. Para la accesibilidad, verifica que cualquier texto colocado sobre un gradiente cumpla los requisitos de contraste en cada punto de la transición, no solo en el color inicial o final.
¿Cuál es la diferencia entre gradientes lineales y radiales?
Un gradiente lineal transiciona los colores a lo largo de una línea recta en un ángulo especificado: ideal para fondos horizontales o diagonales y banners. Un gradiente radial irradia hacia el exterior desde un punto central en un patrón elíptico o circular: útil para efectos de luz focal, elementos brillantes o componentes de UI circulares. Ambos soportan múltiples paradas de color y todos los formatos de color CSS.
¿Puedo aplicar un gradiente a texto o bordes?
No directamente mediante la propiedad color, pero existen soluciones alternativas. Para texto con gradiente: establece background con tu gradiente, luego añade -webkit-background-clip: text y color: transparent. Para bordes con gradiente: usa un pseudoelemento o la propiedad border-image. Ambas técnicas funcionan en navegadores modernos. El texto con gradiente queda llamativo en títulos grandes, pero perjudica la legibilidad en texto pequeño o de cuerpo: úsalo con moderación.