CSSボックスシャドウ生成
box-shadowをスライダーで直感操作。複数レイヤーにも対応。
水平4px
垂直4px
ぼかし15px
広がり0px
不透明度0.2
色:
CSS
box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.2);プリセット
❓ よくある質問
box-shadowの各値の意味は？
左から順に、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色です。insetを付けると内側の影になります。
複数の影を重ねるメリットは？
複数の影を組み合わせることで、よりリアルで立体的な表現が可能になります。ネオモーフィズムのようなデザインも影の重ね合わせで実現できます。
パフォーマンスへの影響は？
box-shadowはGPU合成レイヤーを使用しないため、多用するとレンダリングコストが高くなります。アニメーションにはtransformの使用を検討してください。
🔧 関連ツール
C
カラーコード変換
HEX・RGB・HSLを相互変換。カラーピッカーで直感的に色を選択。
⊞
アスペクト比計算
画像・動画のアスペクト比を計算。SNSや動画サイトの推奨サイズも一覧表示。
🎨
CSSグラデーション生成
CSSグラデーションを視覚的に作成。線形・放射状対応。プリセット付き。
🖼
画像Base64変換
画像ファイルをBase64に変換。Data URI形式でHTML・CSSに埋め込み可能。
⬜
CSS Flexbox生成
Flexboxレイアウトを視覚的に作成。direction・justify・align等を直感操作。
⭐
ファビコン生成
テキストや絵文字からファビコンを生成。複数サイズ対応。ダウンロード可能。