CSS Gradient Editor: Generer CSS Code For Gradient Background [Mac]

click fraud protection

CSS er alt som styrer hvordan websiden eller appen din vil se ut for sluttbrukeren, men det kan ta en stund å skrive grunnarket. Det er sannsynligvis derfor du vil finne mange automatiske CSS-kodegeneratorer som lar deg legge til effekter, lage objekter eller enkle graderinger. CSS Gradient Editor er en gratis Mac-app som lar deg lage gradientbakgrunner. Appen gir deg en enkel GUI, slik at du kan velge hvilken som helst farge for gradienten, legge til opptil fem stopp og velge hvor hvert stopp er plassert. Gradienten kan være vertikal eller horisontal, og appen lar deg lage forhåndsinnstillinger og genererer CSS kode kompatibel med Chrome, Firefox, Safari, Internet Explorer 10, Opera, alt samsvarer med W3C standard. Du kan legge inn farger som RGB-, HSL- og Hex-koder.

Appen laster med en enkel, to-skygge gradient. Det har et enkelt vindu delt inn i fire seksjoner, der de to seksjonene til høyre viser koden og forhåndsviser gradienten når du oppretter den. Seksjonene til venstre lar deg legge til forhåndsinnstillinger og opprette eller redigere en gradient.

instagram viewer
CSS Gradient Editor

Du jobber mest med seksjonen nede til venstre. Avhengig av hvilken type gradient du vil opprette, klikker du på enten X-aksen (for en vertikal gradient) eller Y-aksen (for en horisontal gradient) -knapp. Klikk på fargeboksen for Toppfarge, og velg hvilken farge som skal vises øverst eller på venstre side av gradienten. For å legge til et ekstra stopp, sjekk Stoppe boksen like nedenfor Toppfarge, velg et punkt der den andre fargen begynner med å flytte glidebryteren foran den. Følg fargen for å legge til flere stopp. Velg deretter Bunnfarge. Effektene vil forhåndsvises, og koden blir oppdatert når du gjør endringene.

CSS Gradient Editor legger til stopp

Hvis du vil lagre en gradient du har opprettet, klikker du på Lagre forhåndsinnstilling knappen og gradienten blir lagret. Koden kan kopieres og brukes i CSS-arket uten endringer.

Få CSS Gradient Editor fra Mac App Store

watch instagram story