Generador de degradados CSS

Diseña un degradado de colores para el fondo de tu web y copia el CSS. Arrastra las paradas sobre la barra, pulsa en ella para añadir colores y elige entre degradado lineal, radial o cónico.

Degradado

Ejemplos:

Colores

Cada color acepta HEX, rgba(), hsl(), oklch() o un nombre CSS; usa transparent o un alfa menor que 1 para fundir con el fondo.

Tipos de degradado en CSS

linear-gradient() funde los colores a lo largo de una línea con el ángulo que indiques (0deg de abajo arriba, 90deg de izquierda a derecha). radial-gradient() los reparte en círculos o elipses desde un centro, y conic-gradient() los hace girar alrededor de un punto, como en una rueda de color o un gráfico de tarta.

Las versiones repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient() repiten el patrón: con paradas cercanas (por ejemplo, al 0 % y al 10 %) sirven para hacer rayas y cuadros sin imágenes.

Cómo usar el código

Los degradados son imágenes para CSS: se aplican con background o background-image, nunca con background-color. Todos los navegadores actuales los admiten sin prefijos -webkit-.

Para un texto con degradado, combina el fondo con background-clip: text y color: transparent. Y si vas a poner texto encima, comprueba el contraste con el color más claro del degradado.