CSS角丸ジェネレーター

角ごとにピクセルで半径を指定して、カードやタブ、ピル型のボタンを作れます（999pxなら完全なカプセル形）。8値モードに切り替えて4つのハンドルをドラッグすれば、63% 37% 54% 46% / 55% 48% 52% 45% のような有機的な形も作れます。ピル・タブ・葉・卵のプリセット付きです。

使い方

1. 上の列からジェネレーターを選びます：グラデーション、ボックスシャドウ、角丸、ガラス、テキストシャドウ、クリップパス、イージング、Flexbox、Grid。
2. スライダーで調整するか、プレビュー上で直接ドラッグします（グラデーションのカラー位置、clip-pathの点、ベジェのハンドル、角丸の4つのハンドル）。
3. コードの下のプリセットから始めることもできます。
4. コードをタップするとコピーされます。各ジェネレーターの最後の設定は保存されます。

• グラデーションのバーの空いている所をクリックすると、その位置の色でカラー位置が追加されます。
• 角丸の8値モードでは、4つのハンドルが値をペアで動かします（いわゆる「fancy border radius」と同じ方式）。
• Safariではbackdrop-filterに-webkit-接頭辞が必要です。ガラスのコードには両方を含めています。
• FlexboxとGridでは、プレビューの番号付きボックスをタップすると、そのボックスだけのgrow、order、spanを設定できます。

CSSを見ながら作る理由

box-shadow、clip-path、cubic-bezierなどのプロパティは、いくつもの数値が並び、結果を想像しにくいものです。box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25) は、横のずれ・縦のずれ・ぼかし・広がり・色の順です。cubic-bezier(0.34, 1.56, 0.64, 1) は2つ目のy値が1を超えるので、行き過ぎて戻る動きになります。数値を書き換えて再読み込みするより、形をドラッグして結果を見るほうが早く仕上がります。

出力はフレームワーク不要の素のCSSで、現在の主要ブラウザすべてで動きます。スタイルシートやCSS-in-JS、デザイントークンのファイルにそのまま使えます。

覚えておくと便利な値

グラデーションの角度は上から時計回りで、0degが上、90degが右、180degが下です。イージングのキーワードは、ease = cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in = (0.42, 0, 1, 1)、ease-out = (0, 0, 0.58, 1)、ease-in-out = (0.42, 0, 0.58, 1) に相当し、x値は0〜1の範囲に収める必要があります。border-radiusは最大8つの値を取り、スラッシュの前が横方向、後ろが縦方向の半径です。30% 70% 70% 30% / 30% 30% 70% 70% のような指定で、ぷにっとした有機的な形が作れます。

きれいに仕上げるコツ

リアルな影は、濃い影1枚よりも薄い影を何枚か重ねたほうが自然です。真っ黒より背景色を混ぜた影のほうが濁って見えません。すりガラス効果では、背景のいちばんにぎやかな部分の上でも文字が読めるかコントラストを確認しましょう。レイアウトでは、1方向に並べるならFlexbox、行と列を同時に扱うならGridが向いています。プレビューのボックスをタップすると、そのボックスだけのgrow、order、spanを設定できます。

よくある質問