Developer tool
CSS影・角丸ジェネレーター
見た目を確かめながら、box-shadow（影）と border-radius（角丸）の CSS を作れます。できたコードはワンクリックでコピー。
無料
登録不要
スマホ対応
プレビュー
PR
あわせて使いたい
CSS・Webデザインの本
box-shadow や border-radius など、CSS の表現を体系的に学べます。
※ 商品リンクはアフィリエイト広告です。リンク先で購入されると、当サイトに紹介料が入ることがあります。
CSS影・角丸ジェネレーターとは
CSS影・角丸ジェネレーターは、Webページのカードやボタンに使う「影」と「角丸」の CSS を、見た目を確認しながら作れるツールです。数値を手で書き換えて何度も確認する手間が省けます。
使い方
- スライダーで角丸の大きさ、影のずれ・ぼかし・濃さ、色を調整します。
- 上のプレビューで見た目を確認します。
- 下に出た CSS をコピーして、自分のスタイルシートに貼り付けます。
よくある質問
box-shadow の数値の意味は？
順に「横のずれ・縦のずれ・ぼかし・広がり・色」です。ぼかしを大きく、濃さを薄くすると、やわらかく浮いたような影になります。
内側に影を付けられますか？
「内側の影（inset）」にチェックを入れると、へこんだような内側の影になります。