パーツ番号 01-03-12 ・ CSSのみ

グラスモーフィズムフッター

背景をぼかして透過させたガラス質感のフッターです。WordPressで画像やグラデーション背景の上に重ねる先進的なデザインのサイト締めに使えます。

css

プレビュー

ソースコード

HTML

<div class="d01-03-12-bg">
          <footer class="d01-03-12-ft">
            <div class="d01-03-12-logo">Glass Studio</div>
            <nav class="d01-03-12-nav"><a href="#">About</a><a href="#">Service</a><a href="#">Contact</a></nav>
            <div class="d01-03-12-copy">&copy; 2026 Glass Studio</div>
          </footer>
        </div>

CSS

.prev.d01-03-12{padding:0}
        .d01-03-12-bg{width:100%;height:260px;display:flex;align-items:flex-end;background:linear-gradient(135deg,#f472b6,#818cf8,#38bdf8)}
        .d01-03-12-ft{width:100%;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.35);color:#fff;text-align:center;padding:20px 16px}
        .d01-03-12-logo{font-weight:800;font-size:14px;margin-bottom:10px}
        .d01-03-12-nav{display:flex;justify-content:center;gap:16px;margin-bottom:10px}
        .d01-03-12-nav a{color:#fff;text-decoration:none;opacity:.85;transition:opacity .2s}
        .d01-03-12-nav a:hover{opacity:1}
        .d01-03-12-copy{font-size:10px;opacity:.75}

クラス名 .d01-03-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。