ぱたぱたアニメ館

GLASSMORPHISM

このグラスモーフィズムに合わせた背景コードを 6 種類用意しました。 ガラスの透明感を最も美しく見せるための、計算されたグラデーション・コレクションです。 気に入ったデザインがあれば、コードをコピーして自由にご利用ください。

デモ：トワイライト・スカイ

GLASSMORPHISM / TWILIGHT SKY
HTML （クリックで表示）
HTML 

<div class="line-twilight">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.line-twilight {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

デモ：サンセット・オーシャン

GLASSMORPHISM / SUNSET OCEAN
HTML （クリックで表示）
HTML 

<div class="line-sunset">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.line-sunset {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #f953c6 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

デモ：ミッドナイト・フォレスト

GLASSMORPHISM / MIDNIGHT FOREST
HTML （クリックで表示）
HTML 

<div class="line-forest">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.line-forest {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

デモ：ディープ・ロマンス

GLASSMORPHISM / DEEP ROMANCE
HTML （クリックで表示）
HTML 

<div class="mesh-romance">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.mesh-romance {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #ff9a9e;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

デモ：オーロラ・ソフト

GLASSMORPHISM / AURORA SOFT
HTML （クリックで表示）
HTML 

<div class="mesh-aurora">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.mesh-aurora {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #a18cd1;
  background-image: 
    radial-gradient(at 0% 0%, hsla(190, 80%, 70%, 1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(260, 60%, 60%, 1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(320, 70%, 70%, 1) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

デモ：サイバー・ダーク

GLASSMORPHISM / CYBER DARK
HTML （クリックで表示）
HTML 

<div class="mesh-cyber">
  <div class="glass-plate">
    文字を入力してください
  </div>
</div>
CSS （クリックで表示）
CSS 

.mesh-cyber {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #0f172a;
  background-image: 
    radial-gradient(at 0% 100%, hsla(250, 100%, 50%, 0.3) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(180, 100%, 50%, 0.3) 0, transparent 50%), 
    radial-gradient(at 50% 50%, hsla(300, 100%, 50%, 0.2) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);     /* 背後をぼかす */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

カスタマイズ

＜各クラス名とカラーコード＞

名前クラス名文字色背景色の構成
トワイライト・スカイ.line-twilight#ffffff#667eea / #764ba2
サンセット・オーシャン.line-sunset#ffffff#00c6ff / #0072ff / #f953c6
ミッドナイト・フォレスト.line-forest#ffffff#134e5e / #71b280
ディープ・ロマンス.mesh-romance#ffffff#0f1014 / #2f3d6a / #722744
オーロラ・ソフト.mesh-aurora#ffffff#73e6f2 / #6b5ed9 / #f27ec4
サイバー・ダーク.mesh-cyber#ffffff#0f172a / #000080 / #008080

テーブルに記載されている背景色のカラーコード（特に後半のメッシュグラデーション部分）は、CSS のコードと完全には一致していません。 CSS の hsla 指定を 16 進数に換算した近似値を表示しています。

★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る