⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS-generator for animert gradientkant

Generer en jevnt roterende regnbuegradientkant som respekterer border-radius, bygget med @property, conic-gradient og mask-composite – kopier den ekte CSS-en, se den spinne live.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

4px
20px
3s
Behandler … 0%

Resultat

En roterende regnbuekant ser enkel ut helt til du faktisk prøver å bygge en i CSS: å animere en vinkel inne i conic-gradient() med en vanlig egendefinert egenskap gjør ingenting nyttig, fordi nettleseren ikke aner at verdien er en vinkel og ikke kan interpolere mellom 0 deg og 360 deg – den bare hopper. Denne generatoren bruker den virkelige løsningen, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` forteller nettleseren nøyaktig hva slags verdi den egendefinerte egenskapen inneholder, noe som låser opp jevn, GPU-vennlig interpolasjon over en @keyframes-regel.

Selve ringen er et ::before-pseudo-element som er dimensjonert større enn boksen (forskjøvet med minus kantbredden) med bakgrunnen satt til `conic-gradient(from var(--border-angle), ...)` som går tilbake til den første fargen, slik at sveipet ikke har noen synlig skjøt. En maske gjør så den virkelige formingen: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` beholder bare den ringformede differansen mellom padding-boksen og content-boksen, og forkaster det massive gradientrektangelet overalt ellers. Safaris eldre `-webkit-mask-composite: xor` utfører den identiske operasjonen og følger med ved siden av standardegenskapen, slik at effekten gjengis konsistent i stedet for å feile lydløst på én motor.

Støtte for border-radius er ikke en ettertanke som er boltret på i etterkant – pseudo-elementets `border-radius: inherit` betyr at uansett hvilken radius du stiller inn på boksen, overføres den automatisk til ringen, slik at en pilleformet knapp eller et avrundet kort får en avrundet glødende kant i stedet for rette kanter som blør ut av buede hjørner. Test det live: dra radius-skyveknappen fra et skarpt rektangel til en full pilleform og se ringen følge formen ved hvert steg – dette er detaljen som skiller en ekte implementasjon av denne teknikken fra et falskt skjermbilde.

Alt annet på siden kartlegges direkte til den genererte koden: bredde-skyveknappen er ringens tykkelse og pseudo-elementets forskyvning/padding, varighets-skyveknappen er @keyframes-animasjonsvarigheten, retningsbryteren snur bare fortegnet på keyframens sluttvinkel (+360 deg eller -360 deg), og hver fargestopp er et kommaseparert element inne i conic-gradient()-kallet. Hele greia kjører i nettleseren din uten bilder, uten JavaScript-drevet animasjonsløkke og uten eksterne tjenester – kopier CSS-blokken, så fortsetter den å spinne uansett hvor du limer den inn.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Skyveknapper for kantbredde, hjørneradius og rotasjonsvarighet samt en bryter for retning med eller mot klokken – alt oppdateres i live-forhåndsvisningen umiddelbart.
  • En fargestopp-editor for 2 til 5 gradientfarger – legg til, fjern eller velg på nytt hvilken som helst stopp, og conic-gradient-sveipet oppdateres ved hver endring.
  • Kopierbar CSS-blokk med full @property-registrering, ::before-ringreglene og @keyframes-rotasjonen, klar til å limes inn som den er.

Viktigste fordeler

✓ Rotasjonen er genuint jevn fordi vinkelen er registrert som en ekte <angle>-egenskap med @property – uten den registreringen kan ikke nettlesere animere en vinkel som brukes inne i conic-gradient(), og den hopper bare i stedet for å spinne.
✓ Border-radius respekteres automatisk: pseudo-elementet som danner ringen, arver boksens hjørneradius, slik at et avrundet kort får en avrundet glødende kant i stedet for en rektangulær en som stikker ut av hjørnene.
✓ Den nøyaktige CSS-en du forhåndsviser, er den nøyaktige CSS-en du kopierer – den samme genererte blokken driver den levende spinnende boksen og fyller kopieringspanelet, inkludert @property-, @keyframes- og mask-regler.
✓ Både den moderne mask-composite: exclude-syntaksen og Safaris -webkit-mask-composite: xor-fallback følger med, slik at kanten gjengis korrekt på tvers av aktuelle nettlesere.

Bruksområder

  • • Pakk inn et priskort eller en CTA-knapp i en oppsiktsvekkende, roterende regnbueramme uten et eneste bilde eller JS-animasjonsløkke – bare den kopierte CSS-blokken.
  • • Dra glidebryteren for border-radius opp til en pilleform og bekreft at den glødende ringen følger kurven perfekt, i stedet for de firkantede hjørneartefaktene naive implementasjoner produserer.
  • • Senk varigheten til 8–10 s og velg to merkevarefarger for et subtilt, profesjonelt høydepunkt rundt et uthevet kort i stedet for en skrikende regnbueeffekt.