Generador de Gradientes CSS
Tipo de degradado
Color Stop
CSS generado
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Preajustes
Preguntas Frecuentes
Todo lo que necesitas saber sobre los degradados CSS
¿Qué son los degradados CSS?
Los degradados CSS son transiciones suaves entre dos o más colores, creadas sin imágenes. Se dividen en lineales (de un punto a otro), radiales (del centro hacia afuera) y cónicos (rotación alrededor de un punto central). Soportados por todos los navegadores modernos.
¿Cómo funcionan los color stops?
Los color stops definen el color y la posición (0-100%) en que ese color aparece en el degradado. Entre dos stops el navegador crea automáticamente la transición. Puedes añadir hasta 4 stops para crear degradados complejos.
¿Puedo usar degradados en textos y bordes?
¡Sí! Para textos usa: `background: gradient; -webkit-background-clip: text; color: transparent;`. Para bordes usa la propiedad `border-image`. El generador crea el CSS para el fondo, pero las mismas reglas de color se aplican en cualquier lugar.
¿Qué diferencia hay entre degradado lineal, radial y cónico?
El lineal va de un punto a otro siguiendo un ángulo, el radial se abre desde el centro hacia el borde, y el cónico gira alrededor del centro. Todos los navegadores actuales los admiten.
¿Para qué sirven los color stops?
Cada color stop indica un color y su posición de cero a cien en el degradado, y entre dos stops el navegador calcula la transición. Se pueden usar hasta cuatro stops.
¿El degradado se puede usar también sobre el texto?
Sí. Se aplica como fondo y luego se recorta sobre el texto con background-clip ajustado a text y el color en transparente. Para los bordes se usa en cambio la propiedad border-image.