CSSグラデーション・ボックスシャドウ生成

使い方

1. 上のタブでグラデーションかボックスシャドウを選びます。
2. グラデーションは線形・円形・扇形を選び、角度や中心を設定して、バー上のカラーストップをドラッグします。
3. ボックスシャドウは最大8レイヤーまで追加でき、レイヤーごとにオフセット・ぼかし・広がり・色・内側を調整します。
4. プリセットから始めることもできます。「CSSをコピー」で宣言ごと、「値をコピー」で値だけをコピーします。

あわせて使いたいツール

• 🌈カラーコード変換・コントラスト比チェックHEX・RGB・HSL・HSV・CMYKのカラーコードを相互変換し、WCAGのコントラスト比とAA/AAAの合否を確認。10段階のティントとシェードもCSS変数でコピーできます。
• 🎨配色パレットジェネレータースペースキーで5色の配色パレットをランダム生成。気に入った色はロックして残せます。類似色・補色などの配色ルールを選び、CSS変数・SCSS・JSONなどで書き出せます。
• 🫧ブロブ・ウェーブSVG作成なめらかな不定形のブロブと、重なったウェーブ（波）の区切りをSVGで作成。グラデーションにも対応し、コードをコピーするかSVG・PNGでダウンロードできます。ブラウザ内で生成します。
• 📐px・rem変換＆clamp()計算ルートのフォントサイズを指定してpx・rem・emを相互変換。可変フォントサイズ用のclamp()も計算し、ビューポート幅ごとの文字サイズをプレビューできます。よく使うサイズの早見表付き。