Generador de degradats CSS

Dissenya un degradat de colors per al fons del teu web i copia el CSS. Arrossega les parades sobre la barra, fes-hi clic per afegir colors i tria entre degradat lineal, radial o cònic.

Degradat

Lineal Radial Cònic

Angle:

Forma

Centre

Repetir (repeating-gradient)

Exemples:

Colors

Cada color accepta HEX, rgba(), hsl(), oklch() o un nom CSS; fes servir transparent o un alfa menor que 1 per fondre'l amb el fons.

Codi CSS

Tipus de degradat en CSS

linear-gradient() fon els colors al llarg d'una línia amb l'angle que indiquis (0deg de baix a dalt, 90deg d'esquerra a dreta). radial-gradient() els reparteix en cercles o el·lipses des d'un centre, i conic-gradient() els fa girar al voltant d'un punt, com en una roda de colors o un gràfic de pastís.

Les versions repeating-linear-gradient(), repeating-radial-gradient() i repeating-conic-gradient() repeteixen el patró: amb parades properes (per exemple, al 0% i al 10%) serveixen per fer ratlles i quadres sense imatges.

Com fer servir el codi

Els degradats són imatges per al CSS: s'apliquen amb background o background-image, mai amb background-color. Tots els navegadors actuals els admeten sense prefixos -webkit-.

Per a un text amb degradat, combina el fons amb background-clip: text i color: transparent. I si hi poses text a sobre, comprova el contrast amb el color més clar del degradat.