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

CSS Radial Gradient Generator

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 radiella typen som redan är vald: färgerna strålar utåt från elementets mitt i koncentriska cirklar, och varje stopp du ändrar målar om förhandsvisningen direkt.

radial-gradient() är verktyget för spotlight- och glödeffekter, mjuka vinjetter och bakgrunder som behöver en brännpunkt snarare än en riktning. Stopppositionerna i procent avbildar avståndet från mitten — 0 % är mitten, 100 % den bortre kanten — så att dra åt de första stopperna gör en liten ljus kärna, spridning av dem gör en bred spolning.

Kopiera bakgrundsraden när förhandsgranskningen ser rätt ut. Vinkelreglaget är dolt i det här läget eftersom en cirkel inte har någon riktning — byt tillbaka till linjär eller konisk och den dyker upp igen.

🛡️
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.