◻ 1つのツールキットで
あらゆるデザイン作業を

シャドウ生成

マルチレイヤー化、リアルタイムの Canvas プレビュー、および CSS 出力を備えたインタラクティブなボックス シャドウ ビルダー。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ シャドウ生成

ボックスシャドウガイド

ボックス シャドウは、照明と標高をシミュレートすることで UI 要素に奥行きを与えます。適切にデザインされた影は視覚的な階層を作成し、インターフェイスをより触感的に感じさせます。

水平オフセット、垂直オフセット、ぼかし、広がり、色、不透明度を調整します。キャンバスのプレビューはリアルタイムで更新されます。問題がなければ CSS コードをコピーします。

Pro Tips

Frequently Asked Questions

Q: ブラーとスプレッドの違いは何ですか?
ブラーとスプレッドの違いは何ですか?ブラーはシャドウエッジの柔らかさを制御します。スプレッドは、影がどの程度広がるかを制御します。
Q: シャドウレイヤーは何枚使用すればよいですか?
シャドウレイヤーは何枚使用すればよいですか?通常は 1 ~ 2 層で十分です。内側の奥行きを表現するには、差し込みシャドウを使用します。
Q: ボックスシャドウレイヤーは何枚使用すればよいですか?
ボックスシャドウレイヤーは何枚使用すればよいですか?プロのデザインでは、深さのために 2 ~ 4 つのレイヤーを使用することがよくあります。小さなタイト シャドウから始めて、中程度のスプレッド シャドウを追加し、必要に応じて大きなアンビエント シャドウを追加します。このツールは無制限のレイヤーをサポートします。
Q: box-shadow のパフォーマンスへの影響は何ですか?
box-shadow のパフォーマンスへの影響は何ですか?いくつかのボックス シャドウの影響は無視できます。ぼかしの多いシャドウが多すぎると、ローエンド デバイスのスクロール パフォーマンスに影響を与える可能性があります。このツールはリアルタイムのプレビューを表示するので、コピーする前に判断できます。
Q: インナーシャドウ(インセット)を作成できますか?
インナーシャドウ(インセット)を作成できますか?現在のバージョンは外側の影に焦点を当てています。内側のシャドウの場合は、生成された CSS box-shadow 値の先頭に「inset」キーワードを手動で追加します。

日本の伝統色・和色

和色は平安時代の襲(かさね)の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。

山吹色 #F8B500

山吹の花に由来する黄金色。JIS慣用色名

撫子色 #EEA9A9

ナデシコの花の淡いピンク。平安時代から愛される

浅葱色 #00A3AF

新選組の羽織で有名な青緑色

茜色 #B7282E

茜草の根から染めた深い赤。夕焼けの色

若草色 #C3D825

春の新芽を思わせる明るい黄緑

瑠璃色 #1E50A2

仏教の七宝「瑠璃」に由来する深い青

桜色 #FEF4F4

桜の花びらのようなごく淡いピンク

藤色 #BBBCDE

藤の花の淡い紫。春の代表色

常磐色 #007B43

常緑樹の深い緑。永遠を象徴する

小豆色 #96514D

小豆に由来する渋い赤褐色

Q: 和色とは何ですか?
和色とは何ですか?和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか?
山吹色はどんな色ですか?山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。