# Radiella gradienter: strålkastaren som leder blicken [Canonical HTML page](https://gradiently.design/sv/guide/radial-gradient) En radiell gradient är det närmaste man kommer i design att rikta ett ljus mot något. Så siktar du den, ger den storlek och hindrar den från att se ut som en måltavla. ## The short version - En radiell gradient blandar färg utåt från en mittpunkt i cirklar eller ellipser, i stället för längs en rak linje. - Eftersom blicken går till det ljusaste området fungerar en radiell gradient som en strålkastare som talar om var folk ska titta först. - De mest användbara radiella gradienterna placeras förskjutna från mitten, bakom motivet eller delvis utanför bilden, inte mitt i prick. - En ellips följer formen på sin behållare, medan en cirkel behåller sina proportioner, vilket spelar roll i höga och breda format. - Mörka radiella sken får lätt ränder, så ge dem utrymme att tona bort och lägg till lite korn. En **radiell gradient** är en övergång som sprider sig utåt från en enda punkt, i ringar, i stället för att färdas i en riktning. Mitten har en färg och varje ring rör sig mot nästa. Eftersom blicken går till den ljusaste och mest mättade delen av en bild först fungerar en radiell gradient som en strålkastare: du bestämmer var uppmärksamheten landar och placerar sedan din rubrik, produkt eller ditt ansikte där. Den här guiden handlar om att använda radiella gradienter i design. För hela syntaxen, se [CSS radial-gradient()](https://gradiently.design/sv/guide/css-radial-gradient). För hur den står sig mot linjär, konisk och mesh, se [typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients). ## Vad en radiell gradient gör med en layout En linjär gradient antyder riktning: ljus från ovan, en horisont, en svepning. En radiell gradient antyder en källa. Den källan blir den naturliga blickpunkten, så allt som placeras på den känns avsiktligt och allt som placeras vid kanterna känns underordnat. Det är ett av de enklaste sätten att bygga [visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy) utan att lägga till en enda form. Strålkastare: `radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)` En varm ljuspöl på en nästan svart botten. Blicken landar på den ljusa mitten före allt annat. ## Cirkel eller ellips I CSS är en radiell gradient en ellips som standard, utsträckt till proportionerna hos sin ruta. På en bred banner betyder det ett platt, brett sken, och på en hög story blir det en hög oval. En cirkel behåller samma form i vilken storlek som helst, vilket läses mer som en verklig ljuskälla. - Ellips: följer bilden: `radial-gradient(ellipse at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` - Cirkel: behåller formen: `radial-gradient(circle at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` Samma färger och stopp. Ellipsen sträcks med rutan, cirkeln förblir rund. Använd en ellips när du vill att skenet ska fylla formatet jämnt, som i en vinjett. Använd en cirkel när gradienten ska se ut som en enda lampa, en sol eller en gloria bakom ett enda föremål. ## Var du placerar mitten Ett sken mitt i prick i en kvadrat är den vanligaste radiella gradienten och den minst intressanta. Den ser ut som en måltavla. Att flytta mitten ändrar hela stämningen i verket. - Mitten: statisk, symmetrisk: `radial-gradient(circle at 50% 50%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Uppe till vänster: ljus från ett fönster: `radial-gradient(circle at 22% 18%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Under bilden: en stigande horisont: `radial-gradient(circle at 50% 115%, #38bdf8 0%, #1e3a8a 45%, #020617 85%)` - Nere till höger: bakom ett motiv: `radial-gradient(circle at 85% 70%, #38bdf8 0%, #1e3a8a 38%, #020617 75%)` Fyra lägen för en gradient. Bara mittpunkten ändras. - **Bakom motivet.** Lägg skenet direkt bakom en produkt eller ett porträtt så att den skiljer sig från bakgrunden. - **På en tredjedel.** Att placera källan nära en tredjedel av bredden eller höjden känns balanserat utan att bli statiskt. - **Utanför bilden.** En mitt under eller bredvid duken ger en mjuk ljuskant, som en soluppgång eller en lampa strax utanför bild. - **Bort från texten.** Om den ljusaste punkten ligger under vit text sjunker kontrasten precis där du behöver den mest. ## Fyra jobb som radiella gradienter gör bra ### Strålkastare och fokus En ljus mitt på en mörk botten pekar på det som ligger på den. Det passar produktbilder, evenemangsaffischer och [meddelandeinlägg](https://gradiently.design/sv/guide/announcement-post-design) där en enda sak spelar roll. ### Vinjett Det omvända: en ljusare mitt som tonar mot mörkare kanter. En subtil vinjett drar blicken inåt och får en platt bakgrund att kännas fotograferad. Håll förändringen liten, annars ser det ut som ett gammalt kamerafilter. Mjuk pappersvinjett: `radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)` En ljus vinjett på en varm papperston. Mitten förblir fri för text, hörnen mörknar försiktigt. ### Sken och gloria En liten, mättad cirkel som tonar till genomskinlig läses som ljus som kommer från något: en neonskylt, en skärm, en ikon. Lägg två eller tre sådana i olika lägen och du är halvvägs till en [norrskensgradient](https://gradiently.design/sv/guide/aurora-gradients). ### Färgfält Lägg flera radiella gradienter med genomskinliga kanter på varandra så blandas de till ett mjukt, organiskt fält. Så fejkas de flesta [CSS mesh-gradienter](https://gradiently.design/sv/guide/css-mesh-gradient). ```css .poster { background: radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%), radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%), radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%), #0f0a1f; } ``` Tre sken som tonar till genomskinligt över en mörk botten. Det första lagret i listan ligger överst. ## Radiella gradienter med text En stående evenemangsaffisch med en rubrik över en glödande del av bakgrunden En affisch där den upplysta ytan ligger bakom rubriken. En stående story med en kort textrad satt i en lugn, mörk del av bakgrunden En story där texten hålls i det lugna, mörkare fältet. Bestäm vilket av två jobb skenet har. Antingen ramar det in orden, med mörk text på den ljusa mitten, eller ramar det in utrymmet bredvid orden, med ljus text på den mörka omgivningen. Problemen börjar när skenets kant skär genom en textrad, eftersom kontrasten ändras halvvägs längs den. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) har mer om hur du hittar den lugna zonen. ## Vanliga problem med radiella gradienter ### Undvik - Ett centrerat sken i varje design, som en måltavla - En hård ring där två stopp ligger för nära varandra - Ett mörkt sken som tonar över ett kort avstånd och får ränder - En ellips som av misstag sträckts tunn över en bred banner ### Gör så här - Placera källan där motivet eller ljuset skulle vara - Sprid stoppen så att avtoningen känns som verkligt ljus - Ge mörka sken en lång avtoning och lite korn - Välj cirkel eller ellips med avsikt för varje format Bandning är det du ska se upp med. Ett sken från djup marinblått till svart täcker mycket få färgnivåer över en stor yta, så det får steg. Låt avtoningen färdas längre och lägg till korn, som det beskrivs i [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding). ## FAQ ### Vad är en radiell gradient? En radiell gradient blandar färger utåt från en mittpunkt i cirklar eller ellipser, i stället för längs en rak linje som en linjär gradient. ### Vad är skillnaden mellan en cirkel och en ellips i en radiell gradient? En ellips sträcks för att matcha proportionerna hos sin behållare, medan en cirkel behåller samma runda form i vilken storlek som helst. I CSS är standarden en ellips. ### När ska jag använda en radiell gradient i stället för en linjär? Använd en radiell gradient när du vill ha en blickpunkt, ett sken eller en vinjett. Använd en linjär gradient när du vill ha riktning, som ljus från ovan eller en horisont. ### Varför ser min radiella gradient ut som en måltavla? Den är förmodligen centrerad med stopp som ligger nära varandra. Flytta mitten från mitten eller utanför bilden och sprid stoppen så att ljuset tonar gradvis.