CSS-gradientgenerator
Bygg CSS-gradienter visuelt: lineær, radiell eller konisk type, vinkelskyveknapp og opptil seks fargestopp med en direkte forhåndsvisning i full bredde og kopierbar kode.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
Å skrive linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) for hånd og oppdatere siden for å se resultatet er en treg runddans. Denne generatoren kutter ut det: velg lineær, radiell eller konisk, dra på vinkelskyveknappen, sett hvert fargestopp med en innebygd fargevelger og en prosentposisjon – og forhåndsvisningen i full bredde oppdateres ved hver eneste endring, med den ferdige bakgrunnslinjen alltid klar til å kopieres.
De tre gradienttypene dekker ulike oppgaver. Lineære gradienter toner langs en retning og bærer de fleste hero-seksjoner og knapper; radielle gradienter stråler fra midten for glød og vignetter; koniske gradienter sveiper rundt sentrum og driver sektordiagrammer og fargehjul. Du kan bytte type når som helst – stoppene dine følger med, så det tar bare sekunder å sammenligne de tre.
Opptil seks fargestopp gir deg rom for flerbånnede design, og forhåndssidene leverer utprøvde kombinasjoner – en varm solnedgang, et rolig hav og et mykt pastellpar – som utgangspunkt du kan finjustere i stedet for tomme lerreter. Legg merke til arbeidsdelingen: fargepalettgeneratoren på dette nettstedet plukker harmoniske, flate farger, og fargeformatkonvertereren oversetter en verdi mellom HEX, RGB og HSL, mens dette verktøyet gjør en annen jobb – det gjør de valgte fargene om til ferdig CSS-gradientkode.
Alt kjøres lokalt i nettleseren din: ingen opplasting, ingen konto, ingen rundturer til server, og generatoren fortsetter å fungere offline når den først er lastet.