FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / デザイン / 52 CSS BOX-SHADOW GENERATOR

box-shadow ジェネレーター

CSSの影をスライダーで調整しながら決めて、そのままコピーできるツールです。影を何枚も重ねる多層シャドウに対応していて、1本の影を「なめらかにする」ボタンで薄い影の重なりへ分けられます。Material風・ニューモーフィズム・フォーカスリングなどの定番プリセット、DevToolsからコピーした影の読み込みつき。

影を調整します

プレビュー

プレビューの枠は overflow: hidden です。枠の外へ出た影が切れるのは、実際のページでも同じことが起きるためです（影はレイアウトの場所を取らないので、親が切っていれば切れます）。

影のレイヤー

一覧のいちばん上が手前です（CSSは最初に書いた影を上に描きます）。「なめらかにする」は、選んでいるレイヤー1枚を薄い影の重なりへ分けます——距離とぼかしを段階的に伸ばし、濃さは重ねたときに元と同じになるよう 1-(1-α)^(1/n) ずつ配ります。

選んでいるレイヤー
横へずらす px
縦へずらす px
ぼかす px
広げる px

色は HEX・rgb()・hsl()・oklch()・CSSの色名で入れられます。濃さのスライダーは色の透明度（アルファ）で、色見本の側は不透明な色だけを扱います。

既存の影を読み込む

DevToolsでコピーした値を、box-shadow: や末尾の ; ごと貼り付けられます。長さの単位は px（と裸の 0）だけ読みます——em や rem は基準の文字サイズ次第で変わるため、あえて解釈しません。

2
重ねている枚数
0px
要素からのはみ出し
0%
いちばん濃いところ
0
CSSの文字数
生成したCSS 

  


  

  

    
チェック結果

    
    
  
    

  
    影の色を作るなら Colorコード変換＆アルファ透過計算機、背景のグラデーションは CSSグラデーションジェネレーター、影が動くときの速度曲線は イージング（cubic-bezier）プレビュー＆比較、影の色と背景の見分けやすさは コントラスト比チェッカーで確かめられます。
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. 形と色を決めるプレビューの背景色・要素の色・角丸を、実際に使う画面に近づけます。影の見え方は下の背景の色で大きく変わるので、白の上で作った影を灰色の画面に置くと消えます。
      2. 
      
    2. 影を重ねるスライダーでX・Y・ぼかし・広がり・濃さを決め、「＋ 重ねる」で2枚目を足すか、「なめらかにする」で1枚を薄い影の重なりへ分けます。「プリセット」タブから Material風・ニューモーフィズムを読み込んで直すのも早道です。
      3. 
      
    3. コピーして貼る「値をコピー」で box-shadow の値だけ、「宣言をコピー」でプロパティごと取れます。色の書き方（rgb(… / …)／rgba()／HEX）はプロジェクトに合わせて選べます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    CSSの影は4つの数字と1つの色でできています。box-shadow: X Y ぼかし 広がり 色; の順に並び、先頭に inset を付けると内側に落ちます。このツールはその5つをスライダーで動かしながら、実際の要素に当てた結果とCSSを同時に見せます。プレビューの背景色・要素の色・角丸・大きさも変えられるので、使う画面に近い条件で決められます——影の見え方は下地の色で大きく変わり、白の上で作った影は灰色の画面ではほとんど見えません。
    
    
    多層シャドウが主目的です。現実の影は「要素の近くは狭く濃い／遠くは広く薄い」が同時に成り立っていて、1本の box-shadow ではどちらかしか表せません。薄い影を数枚重ねると同じ濃さでも自然に見えます。「なめらかにする」は選んでいる1枚を n 枚へ分ける機能で、距離とぼかしを段階的に伸ばしつつ、濃さは 1-(1-α)^(1/n) ずつ配ります。影を重ねたときの濃さは足し算ではなく 1-(1-α)ⁿ になるため、この配り方にすると枚数を変えても全体の濃さが変わりません。
    
    
    いま書いてあるCSSからも始められます。DevToolsでコピーした値を box-shadow: や末尾の ; ごと貼り付けると、レイヤーに分解して読み込みます（長さの単位は px と裸の 0 のみ）。外側1枚・広がり0の影は filter: drop-shadow() にも書き換えて出します。このときぼかしの数値が半分になるのは、drop-shadow() の第3引数がガウスぼかしの標準偏差で、box-shadow のぼかし半径はその2倍にあたるためです。
    
    
    使いどころの注意も同時に出します。「影が見えない書き方になっている」「濃すぎる」「はみ出しが大きく overflow: hidden の親で切れる」「inset は <img> では出ない」といった指摘をチェック結果に並べます。生成も判定もすべてブラウザ内で完結し、入力はサーバーへ送信されません。URLパラメータで直接呼び出せます: /box-shadow/?css=0 10px 15px -3px rgb(0 0 0 / 0.1)&bg=%23faf8f4&radius=12
    
  
    

  
    
    
    Other Tools