CSSグラデーション・影の生成ツール

スライダーで色や角度を動かしながら、CSSのグラデーション（linear-gradient・radial-gradient）と影（box-shadow）を作るツールです。

見本から選んで調整することもでき、できあがったCSSはそのままコピーして使えます。

CSSを作る

CSSをコピーする

CSSの書き方

グラデーションの角度は、0度で下から上、90度で左から右、180度で上から下に向かって色が変わります。

自然な影にするコツは、色を真っ黒にせず濃さを10〜20%に抑え、ぼかしを大きめにすることです。薄い影を2つ重ねると、よりやわらかく見えます。ボタンのデザインにはボタンCSS生成もお使いください。

あわせて使いたいツール

• ボタンCSS生成：ボタンのデザインを見ながら、CSSを作れます。
• カラーコード変換・コントラスト比チェック：カラーコードの変換と、文字色・背景色の読みやすさをチェックできます。