Xerador de degradados CSS

Deseña un degradado de cores para o fondo da túa web e copia o CSS. Arrastra as paradas sobre a barra, preme nela para engadir cores e escolle entre degradado lineal, radial ou cónico.

Degradado

Exemplos:

Cores

Cada cor acepta HEX, rgba(), hsl(), oklch() ou un nome CSS; usa transparent ou un alfa menor ca 1 para fundila co fondo.

Tipos de degradado en CSS

linear-gradient() funde as cores ao longo dunha liña co ángulo que indiques (0deg de abaixo cara a arriba, 90deg de esquerda a dereita). radial-gradient() repárteas en círculos ou elipses desde un centro, e conic-gradient() fainas xirar arredor dun punto, como nunha roda de cores ou nun gráfico de torta.

As versións repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient() repiten o padrón: con paradas próximas (por exemplo, ao 0% e ao 10%) serven para facer raias e cadros sen imaxes.

Como usar o código

Os degradados son imaxes para o CSS: aplícanse con background ou background-image, nunca con background-color. Todos os navegadores actuais os admiten sen prefixos -webkit-.

Para un texto con degradado, combina o fondo con background-clip: text e color: transparent. E se vas poñer texto enriba, comproba o contraste coa cor máis clara do degradado.