装飾・エフェクト

見た目を作る CSS の技法

• ブラー filter で要素そのものをぼかしたり、backdrop-filter で背後だけをぼかしたりする CSS の技法。
• グラスモーフィズム 背景を透かしてぼかし、すりガラスのような質感に見せる CSS 装飾のスタイル。
• ニューモーフィズム 背景と同系色の要素に明暗 2 方向の影を重ね、押し出し・へこみのある柔らかい質感に見せる CSS 装飾のスタイル。
• クレイモーフィズム パステルカラーの背景に大きな角丸と厚みのある内側の影を組み合わせ、粘土でできたような質感に見せる CSS 装飾のスタイル。
• グラデーション linear-gradient や radial-gradient を使って、色を滑らかに変化させる CSS の背景表現。
• グラデーションテキスト 文字の背景にグラデーションを敷き、その部分だけを文字の形にくり抜いて見せる CSS の装飾テクニック。
• ドロップシャドウ box-shadow や text-shadow で要素や文字に影を落とし、浮いて見える立体感を作る CSS の技法。
• 角丸 border-radius で要素の角を丸くする CSS の技法。丸め方の強さでカードからピル型・円まで作れる。
• クリップパス 要素を指定した図形の形に切り抜いて表示する CSS プロパティ。斜めのセクション区切りや円形・多角形の切り抜きに使う。
• マスク グラデーションや図形を型紙として使い、要素の透明度を部分的に変える CSS の技法。フェードアウトやくり抜き表現に使う。
• ダークモード 背景を黒系、文字を白系に切り替えて表示するテーマ。CSS 変数と data 属性の組み合わせで実装することが多い。
• カスタムカーソル OS 標準のマウスカーソルを非表示にし、代わりに丸い図形などをマウスの動きに追従させて表示する演出。
• グロー効果 text-shadow や box-shadow を同じ色で複数重ねて、文字やボタンが発光しているように見せる CSS の演出。
• ノイズテクスチャ SVG のフィルターで作ったランダムなノイズ模様を背景に薄く重ね、紙やフィルムのようなざらついた質感を加える技法。