⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS linjär gradientgenerator

Bygg CSS-gradienter visuellt: linjär, radiell eller konisk typ, vinkelreglage och upp till sex färgstopp med en liveförhandsvisning i full bredd och kopierbar kod.

90°
Bearbetar... 0%

Resultat

Den här sidan öppnar gradientgeneratorn med den linjära typen som redan är vald. Dra vinkelreglaget för att rotera toningen, justera färgstoppen och förhandsgranskningen i full bredd plus CSS-linjeuppdateringen på varje ingång.

linear-gradient() målar färger längs en rak linje — den överlägset mest använda gradienten i CSS. 90 grader går från vänster till höger, 180 grader uppifrån och ned, och varje vinkel däremellan ger en diagonal; stopppositionerna i procent avgör var varje färgband börjar blandas in i nästa.

När förhandsgranskningen ser rätt ut kopierar du bakgrundsraden till din stilmall. Om du vill ha en startpunkt istället för ett tomt blad, öppnar förinställda solnedgångs-, hav- och pastellsidor samma verktyg med beprövade färgpar som redan är inlästa.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Val av gradienttyp (linjär, radiell, konisk) med ett vinkelreglage för linjära och koniska lägen.
  • Färgstopplista: två stopp för att starta, lägga till eller ta bort upp till sex, var och en med sin egen färgväljare och position i procent.
  • Kopierbar bakgrunds-CSS-linje plus färdiga förinställda sidor för solnedgång, hav och pastellgradienter.

Viktiga fördelar

✓ Förhandsgranskningen i full bredd målas om vid varje förändring - typ, vinkel och varje färgstopp - så CSS du kopierar är precis vad du såg.
✓ Upp till sex färgstopp med individuella positioner täcker allt från en enkel tvåfärgstonning till komplexa flerbandsbakgrunder.
✓ En deklaration, tre motorer: växla mellan linjär, radiell och konisk utan att bygga om dina stopp.

Användningsfall

  • • Komponera en hjältesektionsbakgrund genom att dra vinkel- och färgstoppen istället för att handredigera linear-gradient() och ladda om.
  • • Jämför samma färgstopp som linjära, radiella och koniska gradienter med en omkopplare - stoppen överförs mellan typerna.
  • • Ta en beprövad kombination från förinställningssidan för solnedgång, hav eller pastell och anpassa den till dina varumärkesfärger.