Design lineære og radiale CSS-gradienter visuelt, juster farger og vinkel, og kopier CSS-en.
CSS-gradienter er bakgrunnsmønstrene på det moderne nettet. En lineær gradient blander farger langs en linje i en valgt vinkel; en radial gradient blander dem fra et senterpunkt utover. Begge deklareres i en enkelt CSS-egenskap, gjengis i enhver oppløsning uten en bildefil, og koster ingenting i nettverksvekt. Denne generatoren bygger deklarasjonen visuelt.
Velg to eller tre farger, sett vinkelen for lineær eller la den være for radial, og forhåndsvisningen viser resultatet. CSS-linjen under er klar til kopiering — lim den inn som en background-egenskap, og den fungerer i alle nettlesere utgitt det siste tiåret. Tre farger gir rikere gradienter enn to, og midtfargen er den som avgjør om designet fungerer.
Verktøyet kjører i nettleseren. Det er ingen serverforespørsel, intet bilde generert, ingen fil å laste ned. Det du ser i forhåndsvisningen er det nettleseren gjengir fra CSS-en, noe som betyr at resultatet i produksjon vil være identisk.
Ja. CSS-gradienter støttes i alle moderne nettlesere. Den genererte koden bruker standardsyntaks uten leverandørprefikser.
Verktøyet tilbyr tre fargestopp. For mer komplekse gradienter, start med tre-stopp-koden og legg til stopp manuelt i CSS-en.
Retningen til gradienten i grader. 0 går oppover, 90 går til høyre, 180 går nedover. Glidebryteren dekker 0 til 360.
Ja. Bruk gradienten som background-image, sett background-clip: text og color: transparent. CSS-en dette verktøyet genererer er background-image-delen.
Nei. Det er en CSS-deklarasjon. Nettleseren gjengir den matematisk, så den er skarp i enhver størrelse og legger ingen vekt til siden.
Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.
Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.