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.