tigtools

CSS-gradientgenerator

Välj färger och positioner, välj gradienttyp och kopiera färdig CSS.

Körs i din webbläsare Ingen registrering

Typ
135°
Färgstoppar
  1. Färgstopp 1
    #0b5d1e
    0%
    100%
  2. Färgstopp 2
    #f2c14e
    100%
    100%
En gradient här har mellan 2 och 6 stopp.

Så här använder du det

  1. Välj linjär, radiell eller konisk och ange sedan vinkeln eller mittpositionen.
  2. Ange färg, opacitet och position för varje stopp. Lägg till upp till sex stopp eller ta bort dem du inte behöver.
  3. Kontrollera förhandsvisningen och kopiera sedan CSS-raden till din stilmall.

Så fungerar det

Resultatet är en standard CSS-bakgrundsdeklaration. Linjära gradienter löper längs en vinkel: 0deg går från botten till toppen, 90deg från vänster till höger, 180deg från toppen till botten. Radiella gradienter utgår från en mittpunkt som en cirkel eller ellips som passar rutan. Koniska gradienter sveper runt en mittpunkt, med start vid vald vinkel, vilket är användbart för cirkeldiagramsliknande effekter och färghjul.

Stopp skrivs i ordning efter sin position, så du kan dra positioner fritt. Ett stopp med reducerad opacitet skrivs som rgba(), vilket låter bakgrunden synas igenom. Två stopp på samma position skapar en hård kant i stället för en övertoning, vilket är så ränder skapas.

Alla tre gradientfunktionerna fungerar i alla aktuella webbläsare. Gradienter blandas som standard i färgrymden sRGB, vilket kan se lite grått ut mellan komplementfärger (till exempel blått och gult); att lägga till ett mittstopp med en ljusare färg undviker det.

Exempel

Diskret sidhuvudbakgrund

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) ger en mjuk övertoning uppifrån och ned som håller mörk text läsbar.

Skarpkantade ränder

Använd fyra stopp: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. De två stoppen vid 50 % möts utan övertoning och ger två enfärgade halvor.

Strålkastareffekt

En radiell gradient (cirkel uppe till vänster) från rgba(255, 255, 255, 0.6) till rgba(255, 255, 255, 0) som läggs ovanpå en färg ger ett mjukt ljus i hörnet.

Vanliga frågor

Vilken riktning går 0deg åt?

I CSS pekar 0deg uppåt, så gradienten börjar längst ned och slutar längst upp. 90deg går från vänster till höger. Det skiljer sig från vissa designprogram, där 0° ofta betyder från vänster till höger.

Kan jag använda gradienten på text?

Ja: lägg på bakgrunden och lägg sedan till background-clip: text och color: transparent. Kontrollera att texten förblir läsbar mot sidan i varje punkt av gradienten.

Behöver jag leverantörsprefix som -webkit-linear-gradient?

Nej. Aktuella webbläsare stöder syntaxen utan prefix. Prefix behövs bara för webbläsare som är många år gamla.

Integritet

Allt genereras i din webbläsare. Dina färger och inställningar skickas eller sparas inte.