CSS gradient-generator

Funktioner i CSS gradient-generator

• 01

  Linjär, radial och konisk

  Linjär är den vardagliga bakgrundsgradienten; radial är perfekt för höjdpunkter och vignettkörningar; konisk är perfekt för cirkeldiagram, färghjul och roterande bakgrunder.

• 02

  Upp till sex färgstopp

  Lägg till och ta bort stopp, ställ in varje stopps position med ett skjutreglage och välj dess färg via systemets färgväljare eller ett hex-värde. Stoppen sorteras om efter position automatiskt.

• 03

  Kopierbar CSS-deklaration

  Utmatningen är en komplett background: ... deklaration som du kan klistra in direkt i en stilmall, en styled component eller en Tailwind arbitrary-value-klass.

Vanliga frågor om CSS gradient-generator

Vad är skillnaden mellan linjär, radial och konisk?

Linjära gradienter löper i en rak linje i en viss vinkel; radiala gradienter sprider sig utåt från ett centrum; koniska gradienter sveper omkring en punkt som en klockhand. Varje en passar för en annan visuell effekt.

Hur många färgstopp ska jag använda?

Två stopp är den klassiska två-färggradienten. Tre eller fyra låter dig skapa realistiska övergångar (solnedgång, aurora). Mer än sex tenderar att se brusigt ut — det är därför denna generator begränsar till sex.

Kan jag använda detta för bakgrunder i en e-postmall?

De flesta e-postklienter stöder fortfarande inte moderna CSS-gradienter på ett tillförlitligt sätt — ge en fast reservfärg utöver bakgrundsgradienten om du kopierar detta till en e-postmall.

Är utmatningen pixelkorrekt?

Ja — förhandsvisningen återges av webbläsarens inbyggda gradient-motor, så det du ser är det din CSS kommer att producera.