tigtools

CSS-gradientgenerator

Vælg farver og positioner, vælg en gradienttype, og kopier brugsklar CSS.

Kører i din browser Ingen tilmelding

Type
135°
Farvestop
  1. Stop 1
    #0b5d1e
    0%
    100%
  2. Stop 2
    #f2c14e
    100%
    100%
En gradient her har mellem 2 og 6 stop.

Sådan bruger du det

  1. Vælg lineær, radial eller konisk, og indstil derefter vinklen eller centerpositionen.
  2. Indstil hvert farvestops farve, opacitet og position. Tilføj op til seks farvestop, eller fjern dem, du ikke har brug for.
  3. Tjek forhåndsvisningen, og kopier derefter CSS-linjen ind i dit stylesheet.

Sådan fungerer det

Resultatet er en standard CSS-baggrundsdeklaration. Lineære gradienter forløber langs en vinkel: 0deg går fra bund til top, 90deg fra venstre mod højre, 180deg fra top til bund. Radiale gradienter spredes fra et centrum som en cirkel eller en ellipse, der passer til boksen. Koniske gradienter løber rundt om et centrum og starter ved den valgte vinkel, hvilket er nyttigt til tærtelignende effekter og farvehjul.

Farvestop skrives i rækkefølge efter deres position, så du frit kan trække i positionerne. Et stop med reduceret opacitet skrives som rgba(), hvilket lader baggrunden skinne igennem. To farvestop på samme position skaber en hård kant i stedet for en blød overgang, hvilket er sådan striber laves.

Alle tre gradientfunktioner virker i alle aktuelle browsere. Gradienter blander som standard i sRGB-farverummet, hvilket kan se en anelse gråt ud mellem komplementærfarver (f.eks. blå og gul); ved at tilføje et midterstop med en klarere farve undgås det.

Eksempler

Diskret sidehovedbaggrund

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) giver en blød top-til-bund-overgang, der holder mørk tekst læsbar.

Skarpkantede striber

Brug fire farvestop: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. De to farvestop ved 50% mødes uden overgang og giver to ensfarvede halvdele.

Spotlyseffekt

En radial gradient (cirkel øverst til venstre) fra rgba(255, 255, 255, 0.6) til rgba(255, 255, 255, 0) lagt oven på en farve giver et blødt lys i hjørnet.

Ofte stillede spørgsmål

Hvilken retning går 0deg?

I CSS peger 0deg opad, så gradienten starter i bunden og slutter i toppen. 90deg går fra venstre mod højre. Det adskiller sig fra nogle designprogrammer, hvor 0° ofte betyder venstre mod højre.

Kan jeg bruge gradienten på tekst?

Ja: anvend baggrunden, og tilføj derefter background-clip: text og color: transparent. Kontrollér, at teksten forbliver læsbar mod siden på alle punkter i gradienten.

Behøver jeg vendor-præfikser som -webkit-linear-gradient?

Nej. Nuværende browsere understøtter syntaksen uden præfiks. Præfikser er kun nødvendige til browsere, der er mange år gamle.

Privatliv

Alt genereres i din browser. Dine farver og indstillinger bliver ikke sendt eller gemt.