Generador de gradientes CSS
Elige 2 o 3 colores, el tipo de gradiente y el ángulo: la vista previa se actualiza en tiempo real y el código CSS queda listo para copiar.
Lineal o radial: ¿cuál conviene usar?
El gradiente lineal mezcla los colores a lo largo de una línea recta: a 90° va
de izquierda a derecha, a 180° de arriba abajo. Es la opción de referencia para fondos hero,
botones y banners. El gradiente radial parte del centro y se expande
en círculo hacia fuera, algo que funciona de maravilla para efectos de brillo, fondos suaves y avatares. En cualquier
caso, el código generado usa las funciones nativas linear-gradient() y
radial-gradient() , compatibles con todos los navegadores modernos y sin prefijos de
fabricante.
Cómo usar el código generado
Copia la línea y pégala en tu hoja de estilos como valor de la propiedad background
en cualquier elemento: un div, el body, una tarjeta. Con 3 colores el
navegador reparte las paradas de forma uniforme (0%, 50%, 100%); si necesitas más control, añade a mano los porcentajes
después de cada color, por ejemplo #ff8a5c 20%. Un truco útil: dos colores
cercanos entre sí crean degradados suaves y elegantes, mientras que dos colores opuestos crean un
contraste marcado, perfecto para las llamadas a la acción.