グラデーション枠ジェネレーター（CSS）

グラデーション枠ジェネレーター（CSS）: 用途

グラデーション枠の定番であるborder-imageは、角丸を無視します。このジェネレーターは、2層の背景（padding-boxとborder-box）の手法でborder-radiusを保ちます。カードの背景を透明にしたい場合は、mask-compositeを使ったマスクを使います。

2色または3色、角度、太さ、角を選び、必要に応じて回転する枠も使えます。これはconic-gradientと、@propertyで登録した角度の変数で作られ、動きを減らしたい人の設定では停止します。

使い方

1. 色と角度を選びます。
2. 太さ、角、背景を調整します。
3. CSSをコピーして、クラスを適用します。

使うタイミング

• 注目のプランのカード。
• カラフルな枠付きのプロフィール写真。
• メインの行動を促すボタン。

よくある質問

なぜborder-imageを使わないのですか？

border-imageではグラデーションは表示されますが、角丸（border-radius）が無視されます。このジェネレーターの手法は、グラデーションを枠の部分だけに見える2枚目の背景レイヤーとして描くので、角が丸くなります。

カードの背景が透明な場合は？

透明な背景のオプションを選んでください。コードはマスク（mask）で中央をくり抜く方式になり、カードの後ろにあるものが枠の内側に見えます。

回転する枠はどう動作しますか？

グラデーションは円錐形で、角度は@propertyで登録した変数なので、CSSでアニメーションできます。動きを減らしたい人の設定では、アニメーションは停止します。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール