27 Snygga CSS -bakgrundsgradientexempel

27 Snygga CSS -bakgrundsgradientexempel

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 kommer vi att gå igenom olika exempel på bakgrundsgradienter med CSS.



Bakgrundsgradienter med CSS

CSS -lutningen visar en smidig övergång med två eller flera angivna färger. CSS -gradient ger bättre kontroll och prestanda över att använda en faktisk bildfil (av en gradient). De bakgrundsbild CSS -egenskap används för att deklarera gradienter som bakgrund.





iPhone 7 plus bakkamera fungerar inte

Det finns tre typer av lutningar: linjär (skapad med linjär-gradient () fungera), radiell (skapad med radial-gradient () funktion) och konisk (skapad med konisk-gradient () fungera). Du kan också skapa upprepande lutningar med repeterande-linjär-gradient () , repetition-radial-gradient () , och repeating-conic-gradient () funktioner.

MDN Docs definierar dessa funktioner som:



linjär-gradient () : Linjär-gradient () CSS-funktionen 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, vilket är en speciell typ av .

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



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

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



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

repeating-conic-gradient () : repeating-conic-gradient () CSS -funktionen skapar en bild som består av en upprepande lutning (snarare än en enda lutning) med färgövergångar roterade runt en mittpunkt (snarare än 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(
[ | to ]? ,

)
= [to left | to right] || [to top | to bottom]

Officiell syntax för radiella gradienter

radial-gradient(
[ || ]? [ at ]? ,

);

Officiell syntax för koniska gradienter

conic-gradient(
[ from ]? [ at ]?,

)

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

1. Dammigt gräs

Använd följande CSS för att skapa ovanstående lutning:

Windows 10 vaknar inte från viloläge
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. Sand till blått

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #DECBA4, #3E5151);

3. Kye Meh

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

4. Amen

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. Avslappnande rött

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. Sublimt ljus

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. Megatron

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. Blå hallon

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #00b4db, #0083b0);

9. Premium Dark

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #434343 0%, black 100%);

10. Kristallint

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. Lawrencium

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

Relaterad: Så här ändrar du bakgrundsfärgen med CSS

12. Ohhappiness

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #00b09b, #96c93d);

13. Stammen

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, #870000, #190a05);

14. Gul mango

Använd följande CSS för att skapa ovanstående lutning:

background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

Relaterad: Vad är Cascading Style Sheets och vad används CSS för?

15. Saftigt gräs

Använd följande CSS för att skapa ovanstående lutning:

hemknappen iphone 6 fungerar inte
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. Rosa fisk

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

Relaterat: The Essential CSS3 Properties Cheat Sheet

17. Sea Lord

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. Cherry Blossom

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. Frisk luft

Använd följande CSS för att skapa ovanstående lutning:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); Dela med sig Dela med sig Tweet E-post Hur man använder CSS box-shadow: 13 knep och exempel

Blandade lådor ser tråkiga ut. Piffa upp dem med CSS-skuggaeffekten!

Läs Nästa Relaterade ämnen Om författaren Yuvraj Chandra(60 artiklar publicerade)

Yuvraj är en datavetenskaplig grundstudent vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.

Mer från Yuvraj Chandra

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera