⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

CSS Linear Gradient Generator

Byg CSS-gradienter visuelt: lineær, radial eller konisk type, vinkelskyder og op til seks farvestop med en live forhåndsvisning i fuld bredde og kopierbar kode.

90°
Behandler... 0%

Resultat

Denne side åbner gradientgeneratoren med den lineære type allerede valgt. Træk vinkelskyderen for at rotere udtoningen, justere farvestoppene og forhåndsvisningen i fuld bredde plus CSS-linjeopdateringen på hvert input.

linear-gradient() maler farver langs en lige linje - den mest brugte gradient i CSS. 90 grader løber fra venstre mod højre, 180 grader fra top til bund, og enhver vinkel imellem giver en diagonal; stoppositionerne i procent bestemmer, hvor hvert farvebånd begynder at blande sig i det næste.

Når forhåndsvisningen ser rigtig ud, kopierer du baggrundslinjen ind i dit stylesheet. Hvis du vil have et udgangspunkt i stedet for en blank tavle, åbner solnedgangs-, hav- og pastel-forudindstillede sider det samme værktøj med dokumenterede farvepar, der allerede er indlæst.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Valg af gradienttype (lineær, radial, kegleformet) med en vinkelskyder til lineære og koniske tilstande.
  • Farvestopliste: to stop til at starte, tilføje eller fjerne op til seks, hver med sin egen farvevælger og position i procent.
  • Kopierbar baggrund CSS-linje plus færdige forudindstillede sider til solnedgang, hav og pastelfarver.

Vigtige fordele

✓ Forhåndsvisningen i fuld bredde males igen ved hver ændring - type, vinkel og hvert farvestop - så den CSS, du kopierer, er præcis, hvad du så.
✓ Op til seks farvestop med individuelle positioner dækker alt fra en simpel tofarvet fade til komplekse multi-band baggrunde.
✓ En erklæring, tre motorer: skift mellem lineær, radial og konisk uden at genopbygge dine stop.

Brug Cases

  • • Komponer en heltesektionsbaggrund ved at trække i vinkel- og farvestoppene i stedet for at håndredigere linear-gradient() og genindlæse.
  • • Sammenlign de samme farvestop som lineære, radiale og kegleformede gradienter med en kontakt - stopperne overføres mellem typerne.
  • • Få fat i en gennemprøvet kombination fra siden med forudindstilling af solnedgang, hav eller pastel, og juster den til dit brands farver.