Stil webbplatselement med en CSS-bakgrundsgradient

Om du har varit på internet i mer än några minuter är chansen att du har stött på en CSS-lutning. CSS-bakgrundsegenskapen kan användas för att skapa en rad olika stilar, och en av de mest spännande typerna är vad den kan göra med lutningsvärdet.

Att veta hur man utformar och skapar olika CSS-lutningar är en tillgång för alla programvarudesigners eller utvecklare. Från den här artikeln lär du dig allt du behöver veta för att börja integrera CSS-lutningar i dina projekt.

Vad är en CSS-gradient?

En CSS-gradient är i huvudsak en kombination av två eller flera färger som smidigt övergår från en till en annan. Övergångstillståndet för en CSS-gradient beror på vilken typ av gradient som används. Det finns två huvudtyper av övertoningar som ofta används i programvarudesign: linjär och radiell.

Det finns dock en tredje typ av lutning som är mindre populär och känd som konisk lutning.

CSS Gradients Syntax

Bakgrundsbild: lutningstyp (riktning, färg1, färg2);

CSS-lutningen bör tilldelas CSS-egenskapen i bakgrundsbilden. Gradienttypen kan vara en av flera; linjär gradient, radiell gradient eller konisk gradient. Lutningstypen följs av att öppna och stänga parenteser som innehåller övergångsriktningen för lutningen, liksom de färger som ska inkluderas i lutningen.

Relaterad: Hur man ställer in en bakgrundsbild i CSS

Exemplet ovan visar två färger, men en lutning kan innehålla flera olika färger. Det enda kravet är att varje färg i listan separeras med ett komma.

Vad är en linjär gradient?

Den linjära lutningen är den mest populära CSS-lutningen. Det skapar en horisontell, vertikal eller diagonal övergångsgradient med två eller flera färger.

Exempel på CSS linjär gradient

Bakgrundsbild: linjär gradient (# 00A4CCFF, # F95700FF);

Koden ovan ger följande CSS-gradient:

Det finns en huvudkomponent i gradientsyntaxen som utelämnats från exemplet ovan. Denna komponent är övergångsriktningen för lutningen och den utelämnades eftersom standardinriktningen för den linjära lutningen är vertikal (topp-till-botten); det är den önskade utgången i detta exempel.

Koden ovan ger samma resultat som följande kodrad. Den enda skillnaden mellan de två är riktningssektionen för koden.

Med hjälp av det nedre linjära gradientexemplet

Bakgrundsbild: linjär gradient (till botten, # 00A4CCFF, # F95700FF);

Som du kan se från utdata skapar koden ovan en lutning som börjar med blått överst och sedan långsamt övergår till orange längst ner. Om du ville ändra ordningen på färgerna kan du helt enkelt byta ut till botten med till toppen och detta kommer att vända riktningen för lutningen och producera följande utdata:

På samma sätt som den vertikala inriktningen kan en horisontell inriktning uppnås med två uppsättningar riktningsnyckelord: till vänster och till höger, som kommer att producera följande utgångar, respektive.

Diagonal linjär lutning

Det är möjligt att uppnå en diagonal linjär gradientövergång i vilken riktning som helst med en linjär gradient. Det finns bara fyra specifika listor med nyckelord som du behöver veta för att göra detta möjligt.

• Längst ner till höger
• Längst ner till vänster
• Till höger uppe
• Till vänster uppe

Med hjälp av det diagonala linjära gradientexemplet

Bakgrundsbild: linjär gradient (längst ner till höger, # 00A4CCFF, # F95700FF);

Exemplet ovan ger följande utdata:

Som du kan se från utsignalen ovan gör linjär lutning sin övergång i en diagonal riktning från överst till vänster till nedre högra delen av lutningen.

Mångfärgad linjär lutning

En linjär lutning kan ha två eller flera färger, men hur ser fler färger ut i en lutning? En mångfärgad linjär gradientfärgordning är beroende av dess riktning. De som övergår i horisontell riktning kommer att ha varje ny färg till vänster eller höger om den linjära lutningen, beroende på den exakta riktningen för den linjära lutningen.

Mångfärgad linjär gradientexempel

Bakgrundsbild: linjär gradient (till höger, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Kodraden ovan ger följande utdata:

Som du kan se läggs varje ny färg till höger om lutningen och skapar det som så småningom förvandlas till en regnbåge. Samma effekt kan uppnås i vertikal riktning; emellertid beror det specifika färgarrangemanget på den linjära lutningen på nyckelordet i vertikal riktning (uppåt eller nedåt).

Vad är en radiell lutning?

Radialgradienten skapar en spiralgradient på två fler färger som börjar från mitten som standard. Där den linjära lutningen ger en rak lutning som flyter vertikalt eller horisontellt, ger den radiella lutningen en cirkulär lutning som strömmar från centrum till ytterkanterna.

Använda Radial Gradient Exempel

Bakgrundsbild: radiell gradient (cirkel, # 00A4CCFF, # F95700FF);

Kodraden ovan ger följande utdata:

Ändra Radial Gradient Center

Som standard börjar en radiell lutning i mitten av lutningen. Det är dock möjligt att ändra utgångspunkten genom att införa några få nyckelord.

Ändra exempel på radiell startposition

Bakgrundsbild: radiell gradient (cirkel längst upp till höger, # 00A4CCFF, # F95700FF);

Kodraden ovan ger följande utdata:

Som du kan se från utgången ovan börjar lutningen nu från det övre högra hörnet istället för mitten. Denna ändring är möjlig på grund av att sökordet ingår överst till höger i koden ovan. Följande lista med nyckelord kan också användas för att ändra utgångspunkten för den radiella lutningen:

• Övre vänstra
• Nere till höger
• Nedre vänstra

Mångfärgade radiella lutningar

Liksom den linjära lutningen kan den radiella lutningen också använda två är fler färger, den största skillnaden är att där den linjära lutningen lägger till lutningen i en rak linje, lägger den radiella lutningen till nya färger på utsidan kant.

Flerfärgat exempel på radiell lutning

Bakgrundsbild: radiell gradient (cirkel, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Kodraden ovan ger följande utdata:

Anpassa lutningar

Hittills har du sett hur du ändrar riktning och mittpunkt för en lutning, men du har inte sett hur du anpassar en lutning. Att anpassa en lutning kan låta som mycket arbete, men när du förstår grunderna för att skapa en CSS-bakgrundsgradient nästa uppenbara steg är att lära sig att göra dina CSS-lutningar mer unik.

Som standard upptar färgerna i en lutning en jämnt fördelad mängd utrymme med varje färg som övergår smidigt till den efter den. Så om två färger kombineras för att bilda en lutning, kommer varje färg att ta upp hälften av det tillgängliga utrymmet när de övergår från en till en annan. Om tre färger kombineras kommer varje färg att ta en tredjedel av det tillgängliga utrymmet.

Med en anpassad lutning får du definiera mängden utrymme en färg kommer att uppta i en lutning genom att uttryckligen tilldela färgstoppposition.

Anpassa ett linjärt lutningsexempel 1

Bakgrundsbild: linjär gradient (till höger, # 00A4CCFF, # F95700FF 30%);

Kodraden ovan ger följande utdata:

Utgången ovan visar den andra färgen i den linjära lutningen som stannar vid 30% -punkten för den första färgen i lutningen, istället för sin vanliga position, och eftersom den andra färgen också är den slutliga färgen i lutningen sträcker den sig naturligtvis till slutet.

Om du placerar 30% i koden ovan i slutet av den första färgen bör saker och ting bli tydligare.

Anpassa ett linjärt lutningsexempel 2

Bakgrundsbild: linjär gradient (till höger, # 00A4CCFF 30%, # F95700FF);

Koden ovan ger följande utdata.

Utdata ovan visar tydligt den första färgen i lutningen som stannar vid 30% -punkten för den andra färgen i lutningen. Det här exemplet tillsammans med det ovanstående skulle hjälpa dig att göra anpassning av färgstopp lättare för dig att förstå.

Anpassa en radiell lutning sker på samma sätt som en linjär lutning. Det enda du behöver göra för att uppnå samma resultat ovan i en radiell lutning är att ändra lutningstyp och riktning.

Skapa CSS-gradienter har aldrig varit enklare

Denna handledning artikel ger dig verktygen för att identifiera och skapa linjära och radiella gradienter. Om du har kommit till den här punkten lärde du dig hur du ändrar riktning och centrum för en lutning. Dessutom har du nu färdigheterna att anpassa CSS-lutningar och skapa unika bakgrundsgradienter.

Men om du inte vill gå direkt in i att skapa nya och unika övertoningar kan du börja med att skapa några snygga befintliga.

27 Snygga CSS-bakgrundsgradientexempel

Enfärgade färger är så förra året. Lutningar är inne! Men hur skapar du dem i CSS?

Läs Nästa

Om författaren

Expandera för att läsa hela berättelsen