CSS Box Shadow生成器 - シャドウをビジュアル編集 オンライン
ビジュアルコントロールでCSS box shadowをデザイン。多層シャドウ、ニューモフィズム効果を作成、即使えるCSSコードをコピー。
よくある質問
CSS box-shadowとは何ですか？
CSS box-shadowは、要素のフレームの周りに影効果を追加するプロパティです。ウェブデザインで奥行き、高さ、視覚的な階層を作成できます。このプロパティは複数のパラメータを受け取ります：水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色、および内側の影のためのオプションのinsetキーワード。
このbox shadowジェネレーターの使い方は？
スライダーを調整して水平/垂直オフセット、ぼかし、広がり、不透明度を設定します。カラーピッカーで影の色を選択します。内側の影が必要な場合は「Inset」をトグルします。複雑な効果のために複数のレイヤーを追加します。生成されたCSSコードをスタイルシートにコピーします。
ニューモーフィズムとは何ですか？
ニューモーフィズム（またはSoft UI）は、2つの影を組み合わせて柔らかく押し出されたプラスチックのような見た目を作り出すデザイントレンドです：1つは明るい影（光源をシミュレート）、もう1つは暗い影（影をシミュレート）。効果が適切に機能するには、背景色が要素の色と一致または補完する必要があります。
滑らかでリアルな影はどのように作成しますか？
リアルな影は、段階的に増加するぼかしとオフセットを持つ複数のレイヤーを使用します。このツールの「Layered」プリセットは、複数の影レイヤーを重ねてこの効果を自動的に作成します。手動でレイヤーを追加し、値を段階的に調整することもできます。
インセットシャドウとは何ですか？
インセットシャドウは、要素のフレームの外側ではなく内側に表示されます。押されたまたは彫り込まれた効果を作り出し、入力フィールド、押された状態のボタン、コンテナウェルに一般的に使用されます。「Inset」チェックボックスをトグルしてこの効果を有効にします。
このツールは安全でプライベートですか？
はい。このツールはクライアントサイドのJavaScriptを使用して100%ブラウザで実行されます。影の設定やデザインデータがサーバーに送信されることは一切ありません。すべての作業は完全にデバイス上で行われ、すべてのデザイン作業の完全なプライバシーが保証されます。
コード例
// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
return layers.map(layer => {
const inset = layer.inset ? 'inset ' : '';
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Usage
const shadow = generateBoxShadow([
{ offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
{ offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)