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

CSS Conic 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 koniska typen som redan är vald: istället för att tona ut längs en linje eller ut från mitten, sveper färgerna runt mitten som en klockvisare, med början från vinkeln du ställt in på skjutreglaget.

conic-gradient() är den senaste av de tre CSS-gradientfunktionerna och den bakom cirkeldiagram, färghjul och iögonfallande roterande kanteffekter. Stopppositioner i procent är positioner runt cirkeln — två stopp vid 0 % och 100 % smälter smidigt hela vägen runt, medan stopp placerade nära varandra skapar skarpa kilar.

Justera startvinkeln och stopp tills förhandsgranskningen läser rätt, kopiera sedan bakgrundsraden. Alla moderna webbläsare stöder koniska gradienter, så koden är säker att skicka.

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