ウェブサイトカード用CSS shadowジェネレーター
CSS shadowジェネレーター
CSS box-shadowジェネレーター：カードでプレビュー | We.Inc
レイヤー式CSS box-shadowを作り、明暗の背景にあるサービスカードや料金カードと、見えるフォーカス状態で確認できます。CSSとすぐ使えるカードコンポーネントをコピー。
グレーの四角だけでは影の見え方を判断しにくいものです。ここではレイヤー式box-shadowを調整し、明るいページと暗いページのサービスカード、料金カードでプレビューできます。Tabキーで試せるキーボードフォーカス枠も確認できます。仕上がりに満足したらCSSまたはカードコンポーネント全体をコピーしてください。処理はすべてブラウザー内で行います。入力内容はWe.Incや第三者に送信されず、タブを閉じると消去されます。
- プリセットを選ぶか、最初のレイヤーを調整します。水平方向・垂直方向のオフセット、ぼかし、広がり、色、不透明度、insetを設定します。
- 最大5レイヤーを追加できます。大きな影を一つ使うより、狭い影と広く柔らかい影を重ねる方が自然に見えます。
- 明るい背景と暗い背景を切り替えてプレビューします。Tabキーでカードのボタンにフォーカスを移動し、フォーカス枠が見えることを確認します。
- 選択した背景で影が薄すぎる場合や、カード内テキストのコントラストがWCAG AAを下回る場合に警告します。
- box-shadow宣言か、HTMLとCSSを含むカードコンポーネント全体をコピーします。
- 暗い背景では影がほとんど見えません。代わりにカードを少し明るくするか、細い境界線を使って区切ってください。
- 柔らかい見た目にするには純黒ではなく、背景色に寄せた色合いの影を使います。
- フォーカス表示を影だけに頼らないでください。はっきりしたアウトラインも使用します。
- ぼかし値が大きいほど描画コストが高くなります。長いリストではアニメーションを避けてください。
- サイト全体で影の段階を一つか二つに揃え、奥行きに意味を持たせます。
よくある質問
CSSのbox-shadowプロパティはどう動作しますか？
box-shadowは水平方向のオフセット、垂直方向のオフセット、任意のぼかし半径、任意の広がり、色を受け取ります。内側の影にはinsetキーワードを付けます。影はカンマ区切りで複数指定でき、最初の影が最前面に描画されます。
レイヤー式の影がきれいに見えるのはなぜですか？
実物の影は物体の近くでは輪郭がはっきりし、離れるほど柔らかく広がります。ぼかしを大きくし不透明度を下げた影を2～3枚重ねると、その見え方を再現できます。
暗い背景では影が見えないのはなぜですか？
暗いページに暗い影を重ねてもコントラストがほとんどありません。このツールはその状態を警告します。代わりにカードの表面色を明るくするか、控えめな境界線で浮き上がらせてください。
box-shadowはアクセシビリティに影響しますか？
影は装飾なので、それ自体がコントラスト基準を満たす必要はありません。重要なのはカード上の文字が読みやすく、影の変化だけでなく見えるアウトラインでフォーカスが示されることです。
CSS shadowジェネレーターは無料ですか？
はい。登録不要です。生成したコードをどのプロジェクトにもコピーできます。
公開するコンポーネントで影をテスト
- 単独の四角ではちょうどよく見える影も、料金カードが並ぶと重く見えたり、写真の下では消えたりします。アイコン付きサービスカードや強調表示した料金プランなど、中小企業サイトで実際に使うカードでプレビューすると、公開時の見た目を確認できます。
- コンポーネントコードにはfocus-visibleアウトラインが含まれるため、どの影を選んでもキーボード操作を維持できます。
無料で始める · クレジットカード不要
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る