Hoppa till innehåll

CSS Gradient Generator

Skapa vackra CSS-färgövergångar visuellt med liveförhandsvisning. Stöd för linjära, radiella och koniska gradienter. Lägg till färgstopp, justera vinklar. Kopiera CSS-kod. Gratis onlineverktyg.

Gradienttyp
90°
Färgstopp
CSS-utdata
 

Vad är CSS-gradienter?

CSS-gradienter låter dig visa mjuka övergångar mellan två eller fler angivna färger. CSS erbjuder tre typer av gradienter: linear-gradient (går i en rak linje), radial-gradient (strålar ut från en mittpunkt) och conic-gradient (roterar runt en mittpunkt).

Gradienttyper

Linjära gradienter övergår färger längs en rak linje definierad av en vinkel. Radiella gradienter strålar utåt från en mittpunkt i en elliptisk eller cirkulär form. Koniska gradienter roterar färgövergångar runt en mittpunkt, som ett färghjul.

Färgstopp

Färgstopp definierar färgerna i en gradient och deras positioner längs gradientlinjen. Du kan lägga till flera stopp för att skapa komplexa flerfärgsgradienter. Varje stopp har ett färgvärde och en valfri positionsprocent.

Integritet

All gradientgenerering körs 100 % i din webbläsare. Ingen data skickas till någon server.