Gradientgenerator

Vad är en CSS-gradient?

En gradient är en mjuk övergång mellan flera färger. I CSS skapar du den direkt i egenskapen background – utan en enda bildfil, vilket gör sidan snabbare och gradienten knivskarp i alla upplösningar. Med den här generatorn väljer du färger och inställningar visuellt och får färdig kod att klistra in i ditt projekt.

Linjär, radiell och konisk

CSS har tre typer av gradienter, och verktyget stödjer alla tre:

• Linjär – linear-gradient() övergår längs en rak linje. Med vinkeln bestämmer du riktningen, där 0deg går nedifrån och upp och 90deg från vänster till höger.
• Radiell – radial-gradient() strålar ut från en mittpunkt som en cirkel eller ellips. Perfekt för mjuka ljussken och fokuspunkter.
• Konisk – conic-gradient() roterar färgerna runt en punkt, som visarna på en klocka. Bra för färghjul, pajdiagram och effektfulla bakgrunder.

Så fungerar färgstopp

Ett färgstopp är en färg plus en position mellan 0 % och 100 %. Positionen talar om var i gradienten färgen ska vara som starkast. Med två stopp får du en enkel övergång; lägg till fler för mer avancerade förlopp. Ligger stoppen tätt blir övergången skarp, ligger de långt isär blir den mjuk.

Ett enkelt exempel på färdig kod ser ut så här:

Vill du hitta exakta färgkoder till dina stopp? Använd vår färgväljare för HEX, RGB och HSL, eller bygg en sammanhållen färgpalett att utgå ifrån.