CSS アニメーショングラデーションボーダージェネレーター

回転する虹色のボーダーは、実際にCSSで組み立てようとすると一筋縄ではいきません。普通のカスタムプロパティでconic-gradient()内の角度をアニメーションさせようとしても、ブラウザはその値が角度だと認識できず、0degから360degの間を補完できずに飛んでしまいます。このジェネレーターは正しい解決策であるCSS Properties and Values APIを使用します。`@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` と記述することで、カスタムプロパティがどの種類の値を持つのかをブラウザに正確に伝え、GPUに優しいスムーズな@keyframes補完を実現します。

リングそのものは::before疑似要素で作ります。ボックスよりも大きくサイズ設定し（ボーダーの太さ分だけマイナスのinset）、背景に `conic-gradient(from var(--border-angle), ...)` を設定し、最初の色に戻るようにして継ぎ目のないグラデーションにします。マスクが実際の形状を作り出します。`mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` とすることで、パディングボックスとコンテンツボックスの差であるリング形状だけを残し、それ以外のベタ塗りのグラデーション矩形を排除します。Safariの古い `-webkit-mask-composite: xor` も標準プロパティと併記することで、特定のエンジンで無言で失敗することなく一貫してエフェクトが描画されます。

border-radiusへの対応は後付けではありません。疑似要素の `border-radius: inherit` により、ボックスに設定した角丸の値が自動的にリングへ継承されます。そのため、ピル型のボタンや角丸のカードには、カーブした角からはみ出る直線ではなく、丸みを帯びた光るボーダーが適用されます。スライダーを動かして、鋭い長方形から完全なピル型まで変化させ、リングが形に追従する様子をライブで確認してください。この細部こそが、本物の実装と偽物のスクリーンショットを分けるのです。

ページ上の他の設定はすべて生成されるコードに直接対応しています。太さのスライダーはリングの厚みであり疑似要素のinsetとpaddingです。速度のスライダーは@keyframesのanimation-duration、方向スイッチはキーフレームの終了角度の符号を反転させるだけです（+360degまたは-360deg）。各カラーストップはconic-gradient()呼び出し内のカンマ区切りのエントリです。このすべてが画像やJavaScriptによるアニメーションループ、外部サービスなしにブラウザ上で動作します。CSSブロックをコピーすれば、貼り付けた先でそのまま回転し続けます。