グラデ / ガラス · Gradient / Glass · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Motion › Gradient / Glass

グラデ / ガラス

グラスモルフィズム、グラデーションオーバーレイ、深度演出。

6

Patterns

Motion

Group

isValid=0

Verified

CSS

Animation

01

Glass — Floating Nav Pill

glass-nav-bar

Copy
Link

◆ Glass Nav

機能

料金

ログイン

  • パターン名: Glass — Floating Nav Pill
  • 概要: Frosted glass navigation pill on vibrant gradient background.
  • 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, paragraph, group, paragraph, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/glass-nav-bar"} /-->

CSS:
.section-glass-nav-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-glass-nav-bar').forEach((el) => el.dataset.ready = 'true');

02

Gradient — 3 Aurora Cards

gradient-aurora-card

Copy
Link

🌌

Aurora

青から紫へ、夜のオーロラのような流れるグラデーション。

💎

Frosted Glass

背景がうっすら透ける、すりガラスの質感。

🌅

Sunset

夕暮れ時の空のような、あたたかな色彩のグラデーション。

  • パターン名: Gradient — 3 Aurora Cards
  • 概要: Three gradient cards (Aurora / Frosted Glass / Sunset) showcasing color treatments.
  • 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-aurora-card"} /-->

CSS:
.section-gradient-aurora-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gradient-aurora-card').forEach((el) => el.dataset.ready = 'true');

03

Gradient — Feature Strip (3 Stats)

gradient-feature-strip

Copy
Link

99.9%

稼働率

24/7

サポート

SOC 2

セキュリティ

  • パターン名: Gradient — Feature Strip (3 Stats)
  • 概要: Vibrant gradient strip with 3 KPI highlights (uptime / support / compliance).
  • 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, paragraph, column, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-feature-strip"} /-->

CSS:
.section-gradient-feature-strip { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gradient-feature-strip').forEach((el) => el.dataset.ready = 'true');

04

Gradient — Glass Hero (Sunset)

gradient-glass-hero

Copy
Link

✨ NEW ・ GLASSMORPHISM

未来のインターフェース、
ここから始まる。

ガラスのような透明感と、虹のように移ろうグラデーションが調和する、新世代のビジュアル言語。

無料で試す ↗
  • パターン名: Gradient — Glass Hero (Sunset)
  • 概要: Sunset gradient backdrop with translucent glass card hero — modern visual showcase.
  • 使用目的: Gradient / Glass領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, paragraph, heading, paragraph, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Gradient / Glassをミニマルに見せる余白重視版 / Gradient / Glassをリッチに見せるカバー/カード強調版 / Gradient / Glassをコーポレート向けに整える情報密度高め版 / Gradient / Glassをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/gradient-glass-hero"} /-->

CSS:
.section-gradient-glass-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gradient-glass-hero').forEach((el) => el.dataset.ready = 'true');

05

Glass — FX01 Liquid Glass

fx-glass-liquid

Copy
Link

Liquid Glass

  • パターン名: リキッドガラス — Glass — FX01 Liquid Glass
  • 概要: ハイライトが揺蕩う流体ガラス質感
  • 適用シーン: プレミアムなボタン・パネル
  • 使い方: グループやボタンに fx-glass-liquid
  • メリット: iOS風の最新質感
  • デメリット: 派手な背景が必要
  • バリエーション案: 曇り度
  • 実装時の注意点: 写真/グラデの上で
使い方: グループやボタンに fx-glass-liquid
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

06

Glass — FX02 Gradient Drift

fx-gradient-move

Copy
Link

背景が揺蕩う

  • パターン名: グラデーション漂動 — Glass — FX02 Gradient Drift
  • 概要: 背景グラデーションがゆっくり流れ続ける
  • 適用シーン: ヒーロー・CTA帯
  • 使い方: グループに fx-gradient-move(WPのグラデ背景と併用)
  • メリット: 静かな動きの背景
  • デメリット: –
  • バリエーション案: 速度
  • 実装時の注意点: コントラスト確保
使い方: グループに fx-gradient-move(WPのグラデ背景と併用)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3