27 Snygga exempel på bakgrundsgradient i CSS

Att hålla sig uppdaterad om de bästa webbdesigntrenderna och standarderna är mycket viktigt för en designer eller en utvecklare. För närvarande används bakgrundsgradienter i stor utsträckning på moderna webbplatser.

I den här artikeln går vi igenom olika exempel på bakgrundsgradienter med CSS.

Bakgrundsgradienter med CSS

CSS-gradienten visar en mjuk övergång med två eller fler specificerade färger. CSS-gradient ger bättre kontroll och prestanda jämfört med att använda en verklig bild (av en gradient)-fil. De bakgrundsbild CSS-egenskapen används för att deklarera gradienter som bakgrund.

Det finns tre typer av gradienter: linjär (skapad med linjär-gradient() fungera), radiell (skapat med radial-gradient() funktion), och konisk (skapad med konisk-gradient() fungera). Du kan också skapa upprepade övertoningar med repeating-linear-gradient(), repeating-radial-gradient(), och repeating-conic-gradient() funktioner.

MDN Docs definierar dessa funktioner som:

linear-gradient(): CSS-funktionen linear-gradient() skapar en bild som består av en progressiv övergång mellan två eller flera färger längs en rak linje. Dess resultat är ett föremål för datatyp, som är en speciell typ av .

radial-gradient(): Den radial-gradient() CSS-funktionen skapar en bild som består av en progressiv övergång mellan två eller flera färger som utstrålar från ett ursprung. Dess form kan vara en cirkel eller en ellips. Funktionens resultat är ett objekt av datatyp, som är en speciell typ av .

konisk-gradient(): Den konisk-gradient() CSS-funktionen skapar en bild som består av en gradient med färgövergångar roterade runt en mittpunkt (istället för att stråla ut från mitten). Exempel på koniska gradienter inkluderar cirkeldiagram och färghjul. Resultatet av konisk-gradient() funktion är ett objekt av datatyp, som är en speciell typ av .

Relaterad Samsung slår sig samman med Google för att erbjuda RCS på alla Galaxy-smartphones

repeating-linear-gradient(): The repeating-linear-gradient() CSS-funktionen skapar en bild som består av repeterande linjära gradienter. Det liknar gradient/linear-gradient() och tar samma argument, men det upprepar färgstoppen oändligt i alla riktningar för att täcka hela dess behållare. Funktionens resultat är ett objekt av datatyp, som är en speciell typ av .

repeating-radial-gradient(): Den repeating-radial-gradient() CSS-funktionen skapar en bild som består av upprepade gradienter som utstrålar från ett ursprung. Det liknar gradient/radial-gradient() och tar samma argument, men det upprepar färgstoppen oändligt i alla riktningar för att täcka hela dess behållare, liknande gradient/repeating-linear-gradient(). Funktionens resultat är ett objekt av datatyp, som är en speciell typ av .

repeating-conic-gradient(): Den repeating-conic-gradient() CSS-funktionen skapar en bild som består av en upprepande gradient (snarare än en enda gradient) med färgövergångar roterade runt en mittpunkt (istället för att stråla ut från mitten).

Här är den officiella syntaxen för varje typ av gradient.

Officiell syntax för linjära gradienter

linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

Officiell syntax för radiella gradienter

radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);

Officiell syntax för koniska gradienter

conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)

Här är några fantastiska exempel på bakgrundsgradienter som kan förbättra gränssnittet på din webbplats till nästa nivå.