Generador de degradados CSS
¿Qué es un degradado CSS?
Los degradados CSS te permiten mostrar transiciones suaves entre dos o más colores sin usar archivos de imagen. Vienen en tres tipos: linear-gradient (a lo largo de una línea recta), radial-gradient (irradiando desde un punto central) y conic-gradient (girando alrededor de un punto central). Los degradados se usan para fondos, botones, superposiciones y elementos decorativos.
Cómo usar el generador de degradados CSS
-
Elige un preajuste de las muestras o configura tu propio degradado.
-
Elige el tipo de degradado: linear, radial o conic.
-
Ajusta el ángulo (para linear/conic) o la forma (para radial).
-
Edita los puntos de color: cambia colores y posiciones (0–100%).
-
Agrega o elimina puntos de color según sea necesario.
-
Copia el CSS y pégalo en tu hoja de estilos.
Preguntas Frecuentes
¿Cómo hago un degradado transparente? Utiliza valores de color rgba() o hsla() con un canal alfa de 0 para transparencia total. Por ejemplo, un punto de color rgba(0,0,0,0) es negro completamente transparente, útil para superposiciones de desvanecimiento en imágenes.
¿Cómo creo un punto de color duro (sin transición)? Coloca dos puntos de color en la misma posición — uno terminando y otro comenzando en ese punto. Por ejemplo, red 50%, blue 50% crea un cambio instantáneo de rojo a azul en el punto medio sin transición de degradado.
¿Qué navegadores admiten degradados cónicos? Los degradados cónicos son compatibles con todos los navegadores modernos (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). No son compatibles con Internet Explorer.
¿Puedo usar múltiples degradados en el mismo elemento? Sí. CSS background acepta una lista de capas separadas por comas. Puedes apilar degradados, combinarlos con imágenes de fondo y controlar la posición y el tamaño de cada capa de forma independiente.
Keywords: generador de degradado CSS, gradiente lineal, gradiente radial, gradiente cónico, generador de fondo CSS, selector de color para degradado, herramienta de degradado CSS