ボックスシャドウ（Box Shadow）ジェネレーター

スライダーをドラッグしてbox-shadowを調整し、レイヤーを重ねて深みを出し、完成したCSSを瞬時にコピーできます。

シャドウレイヤー
レイヤー 1
CSS
スライダーを調整して影の形状を整えます。

すべての影のレンダリング処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。

よくある質問

位置、ぼかし、広がりはそれぞれ何を制御しているのですか？

位置（オフセット）は影を左右および上下に移動させ、ぼかし（blur）は影の輪郭を柔らかくし、広がり（spread）はぼかす前に影のサイズを拡大または縮小します。マイナスの広がりを設定すると影が内側に引き締まり、要素に密着したシャープな影を作るのに役立ちます。

内側（inset）オプションは何に使うのですか？

通常の影は、浮き上がったカードの背後にある光のように、要素の外側に落ちます。内側（inset）オプションを有効にすると、影が要素の内側に反転し、要素が凹んでいるように見えます。窪んだ入力フィールドや、押し込まれたボタンを表現するのに便利です。

なぜ複数のシャドウレイヤーを重ねるのですか？

単一の影だけでは、ある程度の大きさになると平坦に見えてしまいます。現実的な立体感を表現するには、通常、境界のはっきりした暗い影と、柔らかく広がった影を組み合わせます。2つ目のレイヤーを追加し、それぞれを個別に調整することで、深みのある効果を得られます。

CSS Cubic Bezier（ベジェ曲線）ジェネレーター2つのハンドルをドラッグしてイージング曲線を設計し、等速運動との違いを視覚的に確認しながら、cubic-bezier()の値をコピーできます。グラデーションジェネレーター線形、円形、扇形グラデーションの作成、カラー分岐点の追加、方向の設定を行い、ワンクリックでCSSをコピーできます。角丸（Border Radius）ジェネレータースライダーで各角を丸め、楕円モードで有機的なアメーバ形状を作成し、CSSを瞬時にコピーできます。Flexboxジェネレーター視覚的なコントロールでFlexコンテナとアイテムを設定し、リアルタイムに変化するレイアウトを確認しながら、ワンクリックでCSSをコピーできます。CSS Gridジェネレーター行と列を設定し、セルをドラッグしてアイテムを配置するだけで、グリッドCSSと対応するHTMLをワンクリックでコピーできます。CSS clamp() 計算ツール小画面用と大画面用のサイズを入力するだけで、その間を滑らかに補間する流動的なclamp()値を生成します。フォントサイズ、パディング、マージン、ギャップに最適です。カラーコード変換ツールHEX、RGB、HSL、HSV、CMYK、LAB間でカラーコードを相互変換。1つのフィールドを編集するだけで、残りの項目がリアルタイムに自動更新されます。CSS整形・圧縮ツール乱雑なCSSを整形して読みやすく。ルールの順序を崩さない安全モード搭載の圧縮機能で、本番用コードもスマートに書き出し。コントラストチェッカー文字色と背景色を入力するだけで、WCAGコントラスト比と、どのAAおよびAAAレベルに合格しているかを即座に判定します。