CSS-gradientgenerator
Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
Vad är en CSS-gradient?
En CSS-gradient är ett CSS-bildvärde som visar mjuka övergångar mellan två eller fler färger utan bildfiler. Gradienter renderas av webbläsaren, vilket gör dem upplösnings Oberoende och mycket presterande.
Vilka typer av CSS-gradienter stöds?
Denna generator stöder tre typer: linear-gradient (färger längs en rak linje), radial-gradient (färger som strålar från mitten) och conic-gradient (färger som roterar runt en mittpunkt).
Skillnad mellan linjär och radiell gradient?
Linjära gradienter överför färger längs en rak linje definierad av en vinkel eller riktningsnyckelord. Radiella gradienter överför färger utåt från en mittpunkt i cirkulära eller elliptiska former.
Hur många färgstopp kan jag använda?
Du kan använda så många färgstopp du behöver. Varje stopp definierar en färg och valfritt en position (0% till 100%) längs gradientlinjen.
Hur använder jag den genererade CSS-koden?
Kopiera den genererade CSS-koden och klistra in den som värde för egenskapen background eller background-image i ditt CSS-stilmall. Koden fungerar i alla moderna webbläsare.
Vad är färgstopp i gradienter?
Färgstopp definierar specifika färger vid specifika positioner längs gradientlinjen. Till exempel skapar "red 0%, blue 50%, green 100%" en gradient som börjar röd, övergår till blått i mitten och slutar grönt.
Kan jag skapa vinklade gradienter?
Ja, linjära gradienter stöder vinkelvärden från 0deg till 360deg. Du kan också använda riktningsnyckelord som "to right", "to bottom", "to top left".
Är CSS-gradienter responsiva?
Ja, CSS-gradienter är i sig responsiva eftersom de är vektorbaserade och renderas av webbläsaren. De skalas perfekt till vilken behållarstorlek som helst utan kvalitetsförlust.
Påverkar CSS-gradienter sidprestanda?
CSS-gradienter är generellt mycket presterande. De eliminerar HTTP-förfrågningar för bildfiler och är hårdvaruaccelererade. Extremt komplexa gradienter kan dock påverka rendering på svaga enheter.
Kan jag använda gradienter för bakgrunder och kanter?
Ja, gradienter kan användas för background-image, border-image, mask-image och alla egenskaper som accepterar CSS-bildvärden.
Vilka webbläsare stöder CSS-gradienter?
Alla moderna webbläsare stöder CSS-gradienter: Chrome, Firefox, Safari, Edge och Opera. Stödet har varit utmärkt sedan IE10. Leverantörsprefix behövs inte längre.
Hur skapar jag en upprepande gradient?
Använd repeating-linear-gradient eller repeating-radial-gradient istället för standardversionerna. Dessa upprepar gradientmönstret för att fylla hela elementet.
Kan jag animera CSS-gradienter?
CSS-gradienter kan inte animeras direkt med CSS-övergångar. Du kan dock animera background-position, background-size eller använda anpassade CSS-egenskaper med @property.
Är denna gradientgenerator gratis?
Ja, denna CSS-gradientgenerator är helt gratis. Ingen registrering krävs, inga användningsgränser och all genererad kod är din att använda i alla projekt.
Hur man använder CSS-gradientgenerator
Skapa CSS-övergångar på känn och kopiera produktionsklar CSS direkt. Renderingen sker lokalt i din webbläsare, utan uppladdningar.
- Välj Type för övergången: linear-gradient eller radial-gradient.
- Ställ in Angle för linjära övergångar, eller välj en Shape som circle eller ellipse för radiella.
- Lägg till, färga om och dra färgstopp i avsnittet Color Stops.
- Klicka på en färgruta under Presets för att börja från en färdig blandning.
- Kopiera den genererade CSS-koden och klistra in den i din stilmall.
Placera två stopp med olika färger på samma position för en hård kant — ett snabbt sätt att göra ränder utan bilder.
Relaterade verktyg
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
- CSS Border Radius Generator Visuell CSS border-radius generator. Justera varje hörn oberoende med realtidsförhandsgranskning och kopiera CSS-koden omedelbart.
- CSS Grid-generator Gratis visuell CSS Grid-generator med liveförhandsgranskning. Designa responsiva grid-layouter interaktivt och exportera produktionsklar CSS-kod direkt.
- CSS Flexbox-generator Visuell CSS Flexbox-generator med liveförhandsgranskning. Justera flex-egenskaper och få CSS-kod redo att använda.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.