← ツール一覧

グラデーション・シャドウCSSジェネレーター — Tailwind対応・プリセット付き

GUIでグラデーションとbox-shadowを設計。CSS・Tailwindコードをワンクリックでコピー。

プリセット：

グラデーション設定

シャドウ設定（box-shadow）

プレビュー背景色

Preview
CSS 

          


          
          

            

              Tailwind CSS
              
            

            

          


          
          

        

      

    


    
    

      
使い方

      
    
        
  1. プリセットを選ぶ — グラスモーフィズムやニューモーフィズムなど8種のプリセットをワンクリックで適用できます。そのままコピーするか、さらにカスタマイズしてください。
    2. 
        
  2. グラデーションを設定する — 種類（linear / radial / conic）を選択し、角度スライダーで方向を変更します。「+ 追加」ボタンでカラーストップを増やし、色と位置を自由に調整できます。
    3. 
        
  3. シャドウを重ねる — 「シャドウレイヤー」で複数の box-shadow を積み重ねられます。X/Y/blur/spread/カラー/inset を個別に設定し、精細な立体感を作れます。
    4. 
        
  4. プレビュー背景色を変える — 白・黒・ダーク系などの背景色を切り替えて、実際の配色環境で仕上がりを確認してください。
    5. 
        
  5. コードをコピーする — 「CSS」ボックスのコピーボタンで background と box-shadow の生のCSSを取得。「Tailwind CSS」ボックスではTailwind v3対応のクラス文字列（カスタム値はJIT形式）を取得できます。
    6. 
      


      
グラデーション・シャドウCSSジェネレーターとは

      
このツールは、Webデザインで頻繁に使われる background（グラデーション）と box-shadow をGUIで直感的に組み合わせ、すぐに使えるCSSコードを生成する無料ジェネレーターです。グラスモーフィズム（すりガラス風）・ニューモーフィズム（柔らかい浮き上がり）など、近年のUIトレンドに対応したプリセットを収録しています。また、Tailwind CSS v3 のユーティリティクラス形式にも対応しており、JIT（Just-In-Time）モードのカスタム値形式で出力するため、そのままHTMLに貼り付けてすぐ使えます。設定はブラウザの localStorage に自動保存されるため、ページをリロードしても前回の状態が復元されます。外部サーバーへのデータ送信は一切なく、完全にブラウザ内で動作します。デザイナー・フロントエンドエンジニア・Webデザインを学ぶ方にとって、CSSの視覚的な理解を深めながら実用的なコードを素早く生成できる便利なツールです。


      
Tailwind CSS 出力について

      
標準的なグラデーション方向（上から下 / 右上など）は bg-gradient-to-* クラスで表現します。カスタム角度や radial / conic の場合は、Tailwind v3 のJIT形式（bg-[conic-gradient(...)] など）で出力します。box-shadow は標準の shadow-* クラスにマッチしない場合、shadow-[...] のカスタム値形式で出力します。