Hva er CSS-gradientgenerator?

Gratis online CSS-gradientgenerator. Lag lineære, radielle og kjegleformede gradienter med sanntidsforhåndsvisning og generering av tilsvarende CSS-kode.

CSS-gradienter er en av de mest effektive måtene å legge til dybde, atmosfære og visuell interesse i et webdesign uten å være avhengig av eksterne bilder. En velvalgt gradient kan forvandle en flat bakgrunn til noe som føles polert og meningsfullt. CSS Gradient Generator gjør det intuitivt å lage disse gradientene: velg lineær eller radial, velg fargene dine, juster vinkelen eller posisjonen, og kopier den klar-til-bruk CSS-koden.

Lineære gradienter overfører farger langs en rett linje. Juster vinkelen fra 0 til 360 grader — 0deg går fra bunn til topp, 90deg går fra venstre til høyre, 180deg går fra topp til bunn, og 270deg går fra høyre til venstre. Radiale gradienter stråler fra et senterpunkt utover i et sirkulært eller elliptisk mønster. Posisjoner senteret ved hjelp av horisontale og vertikale glidere, slik at gradienten kan starte fra et hvilket som helst hjørne eller kant i stedet for standard senter.

Begge gradienttypene støtter 2 til 3 fargestopp. Hvert stopp har sin egen fargevelger, så du kan finjustere hver farge i overgangen. Den levende forhåndsvisningen oppdateres når du justerer en parameter, og gir deg øyeblikkelig visuell tilbakemelding. Seks forhåndsinnstilte gradienter er inkludert som utgangspunkt — klikk på en for å laste den inn i editoren, og tilpass deretter fargene og vinkelen for å matche designet ditt.

Den kopierte CSS-koden er produksjonsklar. Den bruker standard linear-gradient()- eller radial-gradient()-syntaks med leverandørprefikser der det er nødvendig, så den fungerer i Chrome, Firefox, Safari og Edge. Lim den direkte inn i stilarkets background- eller background-image-egenskap. Ingen opprydding eller modifisering er nødvendig — koden er ryddig formatert og klar til umiddelbar bruk.

Gradienter er allsidige utover enkle bakgrunner. Bruk dem til overleggseffekter — et semi-transparent gradientoverlegg over et heltebilde forbedrer tekstlesbarheten ved å mørkne kantene mens senteret forblir lysere. Lag fremdriftslinjefyll der fargen overgår fra merkevarens farge til en komplementær nyanse for å indikere fullføringsnivå. Design kortkomponenter med subtile gradientkanter ved å kombinere en gradientbakgrunn med et transparent indre område ved hjelp av CSS background-clip. Og for moderne glassmorfisme-effekter, legg et semi-transparent gradient over en uskarp bakgrunn — gradienten legger dybde til det som ellers ville vært et flatt frostet glasspanel.