Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Generador de Degradados CSS crea una declaración background a partir de dos colores. Elige Lineal para mezclarlos a lo largo de una línea con cualquier ángulo, o Radial para que se extiendan en círculo desde el centro hacia fuera. La vista previa se actualiza a medida que mueves los controles y el cuadro de salida contiene una línea lista para pegar, como background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
En un degradado lineal, el ángulo marca la dirección: 0deg va de abajo arriba, 90deg de izquierda a derecha y 180deg de arriba abajo. Un degradado radial ignora el ángulo y usa circle, de modo que el primer color queda en el centro. Ambas formas funcionan en todos los navegadores actuales sin prefijos de proveedor, así que la línea generada sirve tal cual.
Cuándo usarla
- Dar a una sección hero o a un botón de llamada a la acción un fondo sutil de dos tonos.
- Sustituir una imagen de fondo con degradado por CSS, para que la página cargue un archivo menos.
- Probar parejas de colores de marca lado a lado antes de incorporarlas a un sistema de diseño.
- Crear un suave resplandor radial detrás de un logotipo o una ilustración.
Ejemplo práctico
Entrada
Tipo: lineal
Ángulo: 90
Colores: #3b82f6, #8b5cf6Salida
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Preguntas sobre esta herramienta
¿Cómo añado un tercer color?
Añádelo a la lista dentro de la función, separado por una coma: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). También puedes dar una posición a cada color, como #8b5cf6 40%, para controlar dónde se produce la mezcla.
¿El texto seguirá siendo legible sobre un degradado?
Comprueba el color del texto con los dos extremos del degradado en el Verificador de Contraste de Color. Si uno de los extremos no cumple, oscurécelo o añade una capa semitransparente detrás del texto.
¿Puedo usar un degradado como borde o como relleno de texto?
Sí, con algo más de CSS. Para el texto, define el degradado como background y añade background-clip: text y color: transparent. Para los bordes, border-image acepta la misma función de degradado.
¿Por qué se ven franjas en mi degradado?
Las franjas (banding) aparecen cuando dos colores parecidos se estiran sobre una superficie grande. Elige colores más distintos entre sí, reduce la superficie o añade una parada intermedia para que cada paso sea más pequeño.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.