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

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

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

CSSを作る

グラデーション影（box-shadow）

書き方	意味
`linear-gradient(135deg, 色1 0%, 色2 100%)`	135度の向きに、色1から色2へ直線的に変わる
`radial-gradient(circle, 色1 0%, 色2 100%)`	中心から外に向かって、円形に色が変わる
`box-shadow: 横縦ぼかし広がり色`	要素の外側に影を付ける。カンマで区切ると影を重ねられる
`box-shadow: inset …`	要素の内側に影を付ける（へこんだように見える）

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

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

このツールは役に立ちましたか？

これからの開発の参考にしたいので、いいねボタンで教えてください。

この記事へのコメントはありません。