CSS geanimeerde verlooprand generator

Een roterende regenboogrand ziet er eenvoudig uit totdat je er echt een probeert te bouwen in CSS: een hoek animeren binnen conic-gradient() met een gewone custom property doet niets nuttigs, omdat de browser niet weet dat de waarde een hoek is en niet kan interpoleren tussen 0deg en 360deg — hij springt alleen maar. Deze generator gebruikt de echte oplossing, de CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` vertelt de browser precies wat voor soort waarde de custom property bevat, wat zorgt voor vloeiende, GPU-vriendelijke interpolatie via een @keyframes-regel.

De ring zelf is een ::before-pseudo-element dat groter is dan de box (verkleind met min de randbreedte) met als achtergrond `conic-gradient(from var(--border-angle), ...)` die terugloopt naar de eerste kleur, zodat de sweep geen zichtbare naad heeft. Een masker doet vervolgens het echte vormgevingswerk: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` behoudt alleen het ringvormige verschil tussen de padding-box en de content-box, waardoor de effen verlooprechthoek overal elders wordt weggegooid. De oudere `-webkit-mask-composite: xor` van Safari voert dezelfde bewerking uit en wordt naast de standaardeigenschap meegeleverd, zodat het effect consistent wordt weergegeven in plaats van stilletjes te falen op één engine.

Ondersteuning voor border-radius is geen bijzaak die er bovenop is geschroefd — de `border-radius: inherit` van het pseudo-element betekent dat elke radius die je aan de box geeft automatisch wordt overgedragen op de ring, zodat een pilvormige knop of een afgeronde kaart een afgeronde gloeiende rand krijgt in plaats van rechte randen die uit gebogen hoeken bloeden. Test het live: sleep de radius-schuifregelaar van een scherpe rechthoek naar een volledige pil en zie hoe de ring de vorm bij elke stap volgt; dit detail onderscheidt een echte implementatie van deze techniek van een nepscreenshot.

Al het andere op de pagina wordt direct vertaald naar de gegenereerde code: de breedteschuifregelaar is de dikte van de ring en de inset/padding van het pseudo-element, de duurschuifregelaar is de @keyframes animation-duration, de richtingsschakelaar keert gewoon het teken om van de eindhoek van de keyframe (+360deg of -360deg) en elke kleurstop is een door komma's gescheiden item binnen de conic-gradient()-aanroep. Het geheel draait in je browser, zonder afbeeldingen, zonder animatielus op basis van JavaScript en zonder externe diensten — kopieer het CSS-blok en het blijft draaien waar je het ook plakt.