CSS gradient generator

Funktioner i CSS gradient generator

• 01

  Lineær, radial og kegle

  Lineær er den hverdagslige baggrundsgradienten; radial er fint til highlights og vignetter; kegle er perfekt til cirkeldiagrammer, farvehjul og roterende baggrunde.

• 02

  Op til seks farvestoppe

  Tilføj og fjern stoppe, sæt hver ens position med en skyder, og vælg dens farve via systemfarve vælgeren eller en hex værdi. Stoppe re-sorteres efter position automatisk.

• 03

  Kopiérbar CSS deklaration

  Outputtet er en komplet background: ... deklaration du kan indsætte direkte ind i et stylesheet, en styled komponent eller en Tailwind arbitrary-value klasse.

Ofte stillede spørgsmål om CSS gradient generator

Hvad er forskellen mellem lineær, radial og kegle?

Lineære gradienter kører i en lige linje i en given vinkel; radiale gradienter spreder sig udad fra et center; keglegradienter fejer omkring et punkt som en urvisser. Hver ene passer til en anden visuel effekt.

Hvor mange farvestoppe skulle jeg bruge?

To stoppe er den klassiske to-farve gradient. Tre eller fire lader dig skabe realistiske overgange (solnedgang, aurora). Mere end seks har en tendens til at se støjende ud — det er derfor denne generator maxes ved seks.

Kan jeg bruge dette til baggrunde i en email skabelon?

De fleste email klienter understøtter stadig ikke moderne CSS gradienter pålideligt — giv en solid fallback farve ud over baggrundsgradienten hvis du kopier dette ind i en email skabelon.

Er outputtet pixel-nøjagtig?

Ja — forhåndsvisningen gengives af browserens native gradient motor, så hvad du ser er hvad din CSS vil producere.