Gradiently Fältguide

Fältguiden

Tydliga, praktiska guider om gradienter, färg, visuell identitet och att göra saker som ser ut som du.

200 guider · 11 ämnen

Börja här

Alla guider

Färg

Färglärans grunder för dig som inte är formgivare

5 minuters läsning

Du behöver ingen konstskola för att välja färger väl. Sex idéer förklarar nästan varje färgval, och var och en går att lära sig på några minuter.

Varumärke

Vad är varumärkesidentitet? Delarna som faktiskt spelar roll

5 minuters läsning

En logotyp är den del av varumärkesidentiteten som alla pratar om och som folk lägger minst märke till. Här är alla delarna, vad var och en bär och hur de tillsammans gör att du blir igenkänd.

Typografi och text

Text på gradientbakgrund: så blir den läsbar varje gång

5 minuters läsning

En gradient förändras under varje bokstav, så en färg som syns i ena änden kan försvinna i den andra. Här är metoden som håller orden läsbara genom hela övergången.

Bakgrunder

Estetiska bakgrunder: så gör du dina egna

5 minuters läsning

Nedladdade bakgrunder delas av alla som hittade samma sida. Att göra egna tar en eftermiddag, och resultatet matchar din mobil, din dator och dina inlägg.

CSS och webb

CSS linear-gradient: den kompletta guiden till linear-gradient()

6 minuters läsning

Varje del av linear-gradient() förklarad med ett levande exempel bredvid koden, från standardriktningen till hårda stopp, lagerlagd glans och mjukare OKLCH-övergångar.

Rörelse

Animerad gradientbakgrund för video och sociala medier

5 minuters läsning

En animerad gradient kan se ut som ljus som rör sig genom siden, eller som en skärmsläckare. Skillnaden är en handfull designval som du kan göra med avsikt.

AI och design

AI-designverktyg: vad de är bra på och var de brister

5 minuters läsning

AI kan ge dig femtio alternativ före lunch. Om något av dem ser ut som ditt varumärke är en annan fråga. Så skiljer du verktygen åt och bedömer dem rättvist.

Använda Gradiently

Vad är en Gradiently-Mark? Levande gradienter förklarade

6 minuters läsning

En Mark ser ut som en gradientbakgrund men beter sig som en varumärkestillgång: ett recept som ritas live, med en offentlig kod, en skapare och exakt en ägare.

Idéer och trender

Gradienttrender 2026: sex riktningar värda att använda

6 minuters läsning

Gradienter försvann inte i år. De blev tystare, kornigare, mörkare och mer personliga. Här är riktningarna som håller, var och en med en look du kan kopiera.

Gradienter

Linjär, radiell, konisk och mesh: alla typer av gradienter förklarade

5 minuters läsning

Varje gradient flyttar färg längs en bana. Ändra banan och du ändrar känslan. Här är varje typ, hur den ser ut, koden för den och det jobb den gör bäst.

Färg

Så använder du en färgcirkel för att välja en palett

5 minuters läsning

Färgcirkeln är färgens äldsta verktyg och fortfarande det mest användbara. Här är hur du läser en, varför målarens cirkel och skärmens cirkel inte är överens och hur du gör den till en palett.

Varumärke

Visuell identitet, varumärkesidentitet och logotyp: skillnaden

4 minuters läsning

Tre begrepp som används som om de betydde samma sak. Det gör de inte, och skillnaden förklarar varför en ny logotyp så sällan lagar ett varumärke som ingen känner igen.

Sociala medier

Storlek på Instagram-inlägg: alla format och vilket du väljer

4 minuters läsning

Instagram accepterar flera former, men de gör inte alla samma jobb. Här är varje format, när du använder vilket, hur profilens rutnät beskär dem och hur du exporterar så att de förblir skarpa.

Typografi och text

Typsnittskombinationer: enkla regler som fungerar

5 minuters läsning

Två typsnitt som ser bra ut var för sig kan slåss när de delar en sida. Några regler och en handfull beprövade par tar bort gissandet.

Bakgrunder

Presentationsbakgrunder som inte slåss med dina slides

5 minuters läsning

De flesta slidebakgrunder väljs för titelsidan och får sedan stå ut med fyrtio innehållssidor. Formge en liten familj i stället: högljudd där det går, tyst där folk behöver läsa.

CSS och webb

CSS radial-gradient: former, storlekar och positioner

4 minuters läsning

radial-gradient() ritar färg utåt från en punkt. Här är varje del av den, med levande exempel, plus lagertricken bakom mjuka sken, strålkastare och vinjetter.

Rörelse

Sömlös loopvideo: så gör du en som aldrig hoppar

6 minuters läsning

En loop som hoppar var tionde sekund är sämre än ingen rörelse alls. Lösningen är inte en bättre redigerare; det är rörelse som är designad för att komma hem.

AI och design

AI-varumärkesidentitet: vad AI klarar och vad som kräver dig

5 minuters läsning

AI ger dig gärna en logotyp, en palett och en slogan innan kaffet hunnit svalna. Om de tillsammans blir ett varumärke är fortfarande ditt jobb.

Använda Gradiently

Så hittar och säkrar du en Mark

5 minuters läsning

Tjugotusen Marks, och en av dem passar dig. Så söker du bra på Marknaden, testar en Mark på dina egna ord och gör den till din.

Idéer och trender

Grafiska designtrender 2026 värda att använda, och hur

6 minuters läsning

Fyra stora riktningar formar designen i år. Var och en kan få ett varumärke att kännas aktuellt, och var och en kan få det att kännas daterat till nästa vår. Så skiljer du dem åt.

Gradienter

Mesh gradient: vad det är och hur du gör en

5 minuters läsning

Mesh gradienter är de mjuka, svävande färgfälten bakom hälften av de startsidor du har sett i år. Här är hur de fungerar, hur du bygger en för hand och de två misstag som förstör de flesta.

Färg

Komplementfärger: kontrast som ändå känns balanserad

5 minuters läsning

Motsatta färger ger den starkaste kontrast som färg kan erbjuda, och den snabbaste vägen till en design som surrar eller en som skriker. Skillnaden är proportion och ljushet.

Varumärke

Så skapar du en varumärkesidentitet på en helg

5 minuters läsning

Du behöver inte tre månader och en byrå för att se ut som ett riktigt varumärke. Du behöver två fokuserade dagar, en tydlig ordning på besluten och disciplinen att sluta när det är bra nog.

Sociala medier

Instagram Story-storlek och säkra zoner

4 minuters läsning

En story fyller hela telefonskärmen, och Instagram lägger sitt eget gränssnitt över topp och botten. Här är storleken, zonerna du ska hålla fria och hur du designar inom dem.