CSS-gradientgenerator: skriv gradienter för hand eller med verktyg

En CSS-gradientgenerator ger dig ett gradientvärde att klistra in, som linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), efter att du valt färger och en vinkel. Det är en bra startpunkt. Men en CSS-gradient är kort nog att skriva för hand på under en minut, och i handskriven kod finns förbättringarna: ett tredje stopp, ett bättre färgrum, ett andra lager. Den här sidan visar hur du läser generatorns kod, rensar den och skriver din egen.

De fyra delarna i varje CSS-gradient

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Varje typ har en egen guide: linjära gradienter, radiella gradienter och koniska gradienter.

Gradientrecept att kopiera

De här är skrivna för hand i stället för genererade, och var och en använder en idé som en enkel generator sällan ger dig: ett ljus utanför mitten, tre stopp i stället för två eller ett valt färgrum. Klicka på någon för att kopiera den.

Så rensar du generatorns kod

Klistra in från en äldre generator och du kan få fem rader där en räcker. Prefixade gradienter och Internet Explorer-filtret har varit onödiga i åratal; de ger extra vikt och, i fallet med den gamla -webkit--syntaxen, ett annat vinkelsystem som förvirrar den som redigerar senare.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Din webbläsare är också en hyfsad generator. Öppna utvecklarverktygen, markera elementet och klicka på en valfri färgruta inuti gradienten i panelen Styles: du får en färgväljare för det stoppet och kan redigera vinklar och procentvärden på plats medan sidan uppdateras live. Kopiera det färdiga värdet tillbaka till din stilmall. För att justera en gradient mot verkligt innehåll slår det varje fristående verktyg, eftersom du ser den bakom din faktiska rubrik.

Fem ändringar som slår vilket reglage som helst

1. 1

   Lägg till ett mittstopp

   Två stopp ger en rak ramp. En tredje färg vid ungefär 50 till 60 procent ger djup och låter dig styra var förändringen sker.

2. 2

   Välj färgrum

   Lägg till in oklab för att hålla blandningar mellan avlägsna färger rena, eller in oklch för att låta nyansen färdas. Gradientinterpolation visar skillnaden.

3. 3

   Flytta ljuset från mitten

   Byt en linjär gradient mot radial-gradient(circle at 80% 20%, ...) så att den ljusaste färgen kommer från ett hörn, som en ljuskälla.

4. 4

   Lägg två eller tre gradienter i lager

   Avgränsa flera värden med komma i background-image. Radiella ljus över en linjär bas ser mycket rikare ut än en gradient; CSS mesh-gradienter tar det längre.

5. 5

   Lägg till lite korn

   Ett svagt brusskikt döljer bandning på stora, mörka gradienter. Koden finns i CSS-brustextur.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Att göra en gradient till en återanvändbar token

När en gradient är rätt, ge den ett namn. En anpassad egenskap rymmer hela värdet, så knappar, banners och heron kan dela den, och en omdesign rör en rad. CSS-variabler för teman visar hur du byter gradienttokens per varumärke eller läge.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

När en generator inte är rätt verktyg

Generatorer och handskriven CSS delar samma gräns: resultatet är en lista stopp som vem som helst kan läsa i din stilmall och återanvända. Det går bra för gränssnittsdetaljer. För bakgrunden folk känner igen dig på, på din webbplats och i varje inlägg, vill du kanske ha något rikare och svårare att kopiera. Det bredare rådet finns i hur du använder en gradientgenerator.

Gradiently-Marks går längre än vad CSS kan beskriva: staplade material, ljus, korn och rörelse, renderade live i varje storlek, med exakt en ägare åt gången. Du kan designa med vilken osäkrad Mark som helst gratis och söka i Marknaden på färgord för att hitta en nära gradienten du försökte skriva.