Skapa vackra CSS-gradienter utan ansträngning
Generera fantastiska linjära, radiella och koniska gradienter med vårt intuitiva gränssnitt. Kopiera CSS-koden och använd den i dina projekt direkt.
Preview
Genererad CSS
Kontroller för övertoning
Populära förinställningar
Exempel på gradient
Utforska dessa fantastiska gradientexempel och låt dig inspireras till ditt nästa projekt. Klicka på valfri gradient för att ladda den i generatorn.
Solnedgång rodnad
En varm gradient inspirerad av vackra solnedgångar.
Ocean bris
En lugn gradient som framkallar känslan av kustvatten.
Mint Fusion
En fräsch och modern gradient som kombinerar mint och himmelsblått.
Lummig trädgård
En livlig gradient som representerar naturens skönhet.
Kosmisk dröm
En magisk gradient inspirerad av natthimlen.
Gyllene timmen
En varm gradient som fångar essensen av skymning.
Dokumentation om gradient
Vad är CSS-gradienter?
Med CSS-övertoningar kan du visa mjuka övergångar mellan två eller flera färger. De kan användas som bakgrunder för element och finns i tre olika typer:
- Linjära övertoningar:Övergångsfärger längs en rak linje.
- Radiella lutningar:Övergångsfärger från en mittpunkt pekar utåt.
- Koniska gradienter:Övergångsfärger runt en mittpunkt i en cirkel.
Hur man använder gradienter
När du har genererat en gradient med vårt verktyg kan du använda CSS-koden i dina projekt:
- Kopiera CSS-koden från generatorn.
- Klistra in den i din CSS-fil eller använd den infogad i dina HTML-element.
- Tillämpa övertoningen på valfritt element med hjälp av
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Använd fler än två färger för en mer komplex övertoningseffekt.
- Justera färgpositionerna för att styra var övergångarna sker.
- Kombinera flera övertoningar för ännu mer kreativa effekter.
- För koniska gradienter skapar en ändring av mitten intressanta mönster.
- Spara dina favoritgradienter för senare användning.
Stöd för webbläsare
CSS-gradienter stöds i stor utsträckning i moderna webbläsare. Det kan dock hända att äldre webbläsare som Internet Explorer inte återger dem korrekt. Ange alltid en reservfärg:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Om det här verktyget
Vår CSS Gradient Generator är utformad för att hjälpa utvecklare och designers att skapa vackra gradienter utan ansträngning. Oavsett om du arbetar med en webbplats, applikation eller bara vill experimentera med färger, gör det här verktyget det enkelt att skapa den perfekta gradienten för ditt projekt.
Features
Lätt att använda
Intuitivt gränssnitt för att skapa gradienter.
Responsiv design
Fungerar perfekt på alla skärmstorlekar.
Redo för kopiering och inklistring
Få ren CSS-kod direkt.
Tillgängliga förinställningar
Börja med vackra fördefinierade gradienter.
Related Tools
Sass till CSS Converter
Omvandla din Sass-kod till CSS. Snabbt, enkelt och säkert.
Generera CSS3-transformeringar med lätthet
Ett kraftfullt, intuitivt verktyg för att skapa komplexa CSS3-transformeringar utan att skriva kod. Visualisera ändringar i realtid och kopiera den genererade CSS:en för att använda i dina projekt.
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Base64 verktyg för avkodare
Generera säkra lösenordshashvärden för WordPress
HEX till HSV
Konvertera färger mellan hexadecimala färgmodeller och HSV-färgmodeller (Hue, Saturation, Value) med förhandsgranskning i realtid.
RGB till Pantone
Konvertera digitala RGB-färger till närmaste Pantone-motsvarigheter®