Gratis CSS-gradientgenerator online. Designa visuellt linjära, radiella och koniska gradienter, kopiera sedan CSS-koden direkt.
Hur använder man Gradientgenerator?
Välj gradienttyp (linjär, radiell osv.).
Lägg till färgstopp och ställ in färger.
Kopiera den genererade CSS-koden.
Vanliga frågor om Gradientgenerator
Vilka gradienttyper stöds?
Linjära, radiella och koniska gradienter stöds.
Kan jag kopiera CSS-koden direkt?
Ja, kopiera den genererade CSS-gradientkoden med ett klick för att tillämpa den direkt på din webbplats.
Varför dyker det upp ett gråaktigt band mitt i min gradient?
När två färger ligger mitt emot varandra i cirkeln passerar blandningen en punkt där mättnaden faller nästan till noll, och det syns som ett matt grått band. Paren blå-orange och röd-grön är de vanliga bovarna. Att lägga in en tredje färg som mellanstopp styr övergången runt gråtonen, och att välja två närliggande nyanser undviker problemet helt.
Kan jag spara gradienten som bildfil och inte bara som CSS?
Ja, du kan ladda ner en PNG och använda den direkt som bildbakgrund, sociala medier-bild eller trycklayout. För en webbsida är CSS ändå bättre: ingen fil behöver laddas, gradienten sträcker sig till vilken skärmstorlek som helst utan att spricka och visar aldrig den trappstegskant som en uppförstorad bitmapp får.
Tips för att använda Gradientgenerator effektivt
Blanda två nyanser som ligger nära varandra på färgcirkeln – motsatser blir smutsgrå i mitten.
En diagonal på 135 grader är det säkraste valet för banners och kortbakgrunder.
Ska text ligga ovanpå bör du kontrollera kontrasten mot den ljusaste färgstoppen.