Marknaden
Priser
Logga inKom igång
FältguidenGradienter
Gradienter

Gradient i Photoshop: verktyg, kartor och mjuka resultat

Photoshop ger dig fyra olika sätt att göra en gradient, och vart och ett passar olika jobb. Här är vilket du ska ta till, hur redigeraren egentligen fungerar och vanorna som håller en blandning fri från ränder.

GradientlyVerifierat Gradiently-konto·1 oktober 2026·6 minuters läsning
Omslag: Thin Pier · GR·YNRB·JF

Kortversionen

  • Photoshop gör gradienter på fyra sätt: gradientverktyget (Gradient tool), ett gradientfyllningslager, en gradientkarta (Gradient Map) och lagerstilen gradientöverlägg (Gradient Overlay).
  • Gradientverktygets liveläge skapar ett redigerbart fyllningslager vars färgstopp du kan dra på ytan, medan klassiskt läge målar pixlar på det aktuella lagret.
  • Photoshop erbjuder fem gradientformer: Linear, Radial, Angle, Reflected och Diamond.
  • En gradientkarta färgsätter om en bild efter dess toner och skickar de mörkaste pixlarna till vänster stopp och de ljusaste till höger.
  • Dither, ett 16-bitarsdokument och lite monokromt brus är de pålitligaste sätten att stoppa bandning i en gradient i Photoshop.
På den här sidan
Fyra sätt att göra en gradient i PhotoshopSå använder du gradientverktygetDe fem gradientformerna i PhotoshopArbeta i gradientredigerarenGradientkartor i Photoshop för fotonSå stoppar du bandning i en gradient i PhotoshopGradienter på text och formerNär en bild blir tio storlekar

En gradient i Photoshop görs med gradientverktyget (Gradient tool, tryck G), ett gradientfyllningslager, en gradientkarta (Gradient Map) eller en lagerstil för gradientöverlägg (Gradient Overlay). För det mesta, använd verktyget i sitt liveläge så att blandningen ligger på ett eget redigerbart lager, välj Perceptual som metod, låt Dither vara ibockad och byt till 16 bitar per kanal när gradienten är mörk eller subtil. De vanorna är skillnaden mellan ett rent svep av färg och ett randigt.

Fyra sätt att göra en gradient i Photoshop

Folk tar ofta gradientverktyget till allt och undrar sedan varför de inte kan ändra färgerna senare. Varje metod har ett jobb, och att välja rätt från början sparar ombyggnad.

Gradient tool

Var du hittar den

Verktygsfältet, genväg G

Bäst för

Att dra en blandning över ett lager eller ett urval
Gradient Fill layer

Var du hittar den

Layer › New Fill Layer › Gradient

Bäst för

Bakgrunder du kommer att fortsätta justera
Gradient Map

Var du hittar den

Layer › New Adjustment Layer › Gradient Map

Bäst för

Att färgsätta om ett foto efter dess ljusa och mörka toner
Gradient Overlay

Var du hittar den

Layer Style (fx-knappen)

Bäst för

Färg på text och former som förblir redigerbar
MetodVar du hittar denBäst för
Gradient toolVerktygsfältet, genväg GAtt dra en blandning över ett lager eller ett urval
Gradient Fill layerLayer › New Fill Layer › GradientBakgrunder du kommer att fortsätta justera
Gradient MapLayer › New Adjustment Layer › Gradient MapAtt färgsätta om ett foto efter dess ljusa och mörka toner
Gradient OverlayLayer Style (fx-knappen)Färg på text och former som förblir redigerbar
De fyra gradientmetoderna i Photoshop och vad var och en är bra på. Fyllningslager, kartor och överlägg är alla icke-destruktiva.

Så använder du gradientverktyget

  1. 1

    Välj verktyget

    Tryck G. Gradientverktyget delar plats med färghinken, så tryck Skift+G om hinken dyker upp i stället.

  2. 2

    Välj live eller klassiskt

    I aktuella versioner erbjuder alternativfältet Gradient, som skapar ett redigerbart gradientfyllningslager med handtag på ytan, och Classic gradient, som målar pixlar på det aktiva lagret. Välj live om du inte medvetet målar i en mask.

  3. 3

    Välj färger

    Klicka på gradientrutan i alternativfältet, eller öppna Window › Gradients för att bläddra bland förinställningar i mappar. Ställ in förgrunds- och bakgrundsfärg först om du vill ha den enklaste tvåfärgsblandningen.

  4. 4

    Välj en form

    Linear, Radial, Angle, Reflected eller Diamond. Nästa avsnitt visar vad var och en gör.

  5. 5

    Dra över ytan

    Starten på draget är det första färgstoppet och slutet är det sista. Håll Skift för att låsa vinkeln till steg på 45 grader. I liveläge kan du dra stoppen och mittpunkten efteråt.

  6. 6

    Ställ in metod och dither

    Välj Perceptual för jämna blandningar mellan mättade färger, och låt Dither vara på. Classic återger det äldre beteendet, som kan se lerigt ut i mitten.

De fem gradientformerna i Photoshop

Linear är arbetshästen för bakgrunder. Radial gör en ljusfläck, vilket är det snabbaste sättet att ge en platt bakgrund djup. Angle sveper färg runt en mittpunkt som en klockvisare. Reflected speglar en linjär blandning från mitten och utåt, vilket passar horisonter och ljusstaplar. Diamond sprider färg i en kvadrat och är den du kommer att använda minst.

Fyra av Photoshops fem former, återbyggda i CSS så att du kan kopiera dem till webben. Angle är en konisk gradient; Diamond har ingen direkt CSS-motsvarighet.

Arbeta i gradientredigeraren

Dubbelklicka på rutan i alternativfältet, eller på gradienten i ett fyllningslagers dialog, för att öppna redigeraren. Färgstopp sitter under fältet och opacitetsstopp ovanför. Klicka under fältet för att lägga till ett stopp, dra bort ett för att ta bort det och dra den lilla romben mellan två stopp för att flytta mittpunkten i deras blandning. Fältet Location låter dig skriva in exakta positioner, vilket spelar roll när du vill att en uppsättning gradienter ska matcha.

Tre till fem stopp ser oftast rikare ut än två: en skuggton, en huvudfärg, en ljusning och kanske en accent. Håll angränsande stopp besläktade, eftersom motsatta färger bredvid varandra passerar genom grått, vilket förklaras i leriga gradienter. Redigerarens meny Gradient Type erbjuder också Noise, som genererar slumpmässiga färgband; det är användbart för texturexperiment, sällan för varumärkesarbete.

Tona ut till genomskinlig, inte till vit

För att låta en bild synas igenom, sätt det sista opacitetsstoppet till 0 % i stället för att välja vitt. Förinställningen Foreground to Transparent gör detta, och den låter lagret under förbli synligt i stället för att tvätta ut det.

Gradientkartor i Photoshop för foton

En Gradient Map ignorerar fotots färger och läser bara dess toner. De mörkaste pixlarna tar vänster stopp, de ljusaste tar höger, och allt däremellan följer fältet. Med två stopp får du en klassisk duoton; med tre kan du driva skuggor svala och högdagrar varma. Sätt justeringslagrets blandningsläge till Color eller Soft Light och sänk opaciteten för en mildare ton. Gradientkarta och duotoneffekten går djupare.

Karta i indigo, rosa och smörlinear-gradient(90deg, #1e1b4b 0%, #db2777 55%, #fde68a 100%)
En karta med tre stopp: skuggor blir indigo, mellantoner rosa, högdagrar ett blekt smörgult. Ladda dessa som stoppen i ett Gradient Map-lager.

Så stoppar du bandning i en gradient i Photoshop

Bandning är synliga steg där en blandning borde vara mjuk. Den är värst i mörka gradienter med låg kontrast som sträcks över en stor yta, eftersom en 8-bitarsfil bara har ett begränsat antal nivåer mellan två nära färger. Hela förklaringen finns i gradientbandning.

Ger band

  • Ett 8-bitarsdokument för en mörk, subtil blandning
  • Dither avstängt
  • Två nära stopp utdragna över 4 000 px
  • Kraftig JPEG-komprimering vid export
  • Metoden Classic mellan starka motsatta färger

Håller den mjuk

  • Image › Mode › 16 Bits/Channel medan du arbetar
  • Dither ibockat i verktyget eller fyllningsdialogen
  • Ett mittstopp, eller metoden Perceptual
  • PNG, eller JPEG i hög kvalitet
  • 1 till 3 % monokromt brus på ett grått Overlay-lager

Brusskiktet är värt att förklara. Fyll ett nytt lager med 50 % grått, sätt det på Overlay så att det grå försvinner och applicera sedan Filter › Noise › Add Noise med Gaussian och Monochromatic ibockade. Det fina kornet bryter upp stegen, överlever komprimering bättre än en ren blandning och får gradienten att kännas som en yta. Korniga gradienter visar utseendet.

Photoshop-tips
Dither på. Banden borta.
Lägg på 2 % monokromt brus före export
Gradiently · @gradiently

En mörk blandning som den här är precis där bandning dyker upp. Dither plus ett lätt korn håller den mjuk på varje skärm.

Gradienter på text och former

För text du vill behålla redigerbar, lägg till ett Gradient Overlay från fx-menyn. Låt Align with Layer vara ibockat så att blandningen spänner över orden i stället för hela ytan, och justera Scale och Angle tills färgändringen sitter där du vill. Alternativet är ett gradientfyllningslager ovanför texten, beskuret mot den genom att hålla Alt (Option på Mac) och klicka på linjen mellan de två lagren. När orden ligger på en gradient i stället för att bära en, läs text på gradient så att de förblir läsbara.

När en bild blir tio storlekar

Photoshop är utmärkt för en enda, noggrant färdigställd bild. Det blir långsamt när samma bakgrund ska bli ett inlägg, en story, en banner och en miniatyr, eftersom varje beskärning flyttar den ljusaste delen och varje yta behöver gradienten ritad på nytt. I Gradiently är bakgrunden en Mark som renderas i varje storlek du designar i, och dess lugnaste område flyttar sig bakom dina ord av sig själv, så en story och en banner kommer från en design. Ett utseende, varje storlek förklarar hur.

Designa med en levande gradient

Inlägg, stories, presentationer och banners i alla storlekar, med text som alltid går att läsa.

Börja designa, gratis

Vanliga frågor

Var finns gradientverktyget i Photoshop?

Det delar plats i verktygsfältet med färghinken. Tryck G för att välja det, eller Skift+G för att växla mellan de två.

Varför har min gradient i Photoshop ränder?

Det är bandning, som orsakas av för få färgnivåer mellan nära toner. Arbeta i 16 bitar per kanal, låt Dither vara på och lägg till lite monokromt brus före export.

Hur gör jag en gradient som tonar ut till genomskinlig i Photoshop?

Använd förinställningen Foreground to Transparent, eller sätt det sista opacitetsstoppet i gradientredigeraren till 0 %.

Hur lägger jag en gradient på text i Photoshop och behåller den redigerbar?

Lägg till en lagerstil Gradient Overlay med Align with Layer ibockat, eller beskär ett gradientfyllningslager mot textlagret.

Vad är skillnaden mellan en gradient och en gradientkarta i Photoshop?

En gradient målar ny färg över en yta. En gradientkarta färgsätter om en befintlig bild efter dess toner, från mörkast till ljusast.

Dela den här guiden

Skriven av GradientlyVerifierat Gradiently-konto

Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.

Se vår profil

På den här sidan

Fyra sätt att göra en gradient i PhotoshopSå använder du gradientverktygetDe fem gradientformerna i PhotoshopArbeta i gradientredigerarenGradientkartor i Photoshop för fotonSå stoppar du bandning i en gradient i PhotoshopGradienter på text och formerNär en bild blir tio storlekar

Dela den här guiden

Nästa i Gradienter

Gradient i Illustrator: linjär, radiell och frihand

Läs vidare

Alla guider om Gradienter
Gradienter

Gradient map: färglägg om vad som helst på några sekunder

4 minuters läsning

En gradient map tar vilken bild som helst, ett foto, en textur eller en illustration, och målar om den i de färger du väljer men behåller allt ljus och all skugga. Det är det snabbaste omfärgningsverktyget som finns.

Gradienter

Därför har din gradient ränder, och så åtgärdar du bandning

5 minuters läsning

Du gjorde en jämn gradient och den blev randig. Det är bandning, och den har en enkel orsak och en handfull pålitliga lösningar. Här är räkneexemplet, sedan botemedlen.

Gradienter

Gradient i Illustrator: linjär, radiell och frihand

5 minuters läsning

Illustrators gradienter bor i en enda liten panel, men de flesta använder bara halva den. Här är hela panelen, frihandstypen och vad som händer med dina gradienter när du exporterar.

Hitta looken som bara är din.

Varje Mark är en levande bakgrund med en enda ägare. Prova en ledig Mark och säkra din när det känns rätt.

Börja designa

Kontrollera ett certifikat

Skriv ett certifikatnummer eller en Marks kod för att se vem som äger den.

Fungerar med ChatGPT och Claude

Be din AI om en design. Den skapar den i din Mark, redo att redigera.

ChatGPTClaude
Så ansluter du

Produkt

  • Marknaden
  • Utforska
  • Priser
  • Certifikat

Lär dig

  • Fältguiden
  • Hjälpcenter
  • Nyheter

Utvecklare

  • Översikt
  • ChatGPT och Claude
  • API-referens
  • API-nycklar

Företaget

  • Om oss
  • Kontakta oss
  • Logga in

Juridik

  • Villkor
  • Integritet
  • Återbetalningar
  • Mark-skydd
  • Cookies
  • Alla policyer
Rör dig över bokstäverna. Var och en bär en riktig Mark.Tryck på en bokstav för att se dess Mark.Ett namn. Tio Marks inuti.
© 2026 Gradiently