グラスカード作成

ぼかしとグラデのグラスモーフィズムカードを作り、コードをコピーします。

カードのプロパティ

背景ブラー: 10px

背景の不透明度: 7%

境界線の不透明度: 30%

角の丸み: 20px

境界線の太さ: 1px

内側のグローの不透明度: 5%

背景色

境界線色

カード要素のコンテンツ

グラスカード

繊細な屈折と境界線のハイライトを備えたプレミアムなインタラクティブコンポーネント。

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

使い方

ぼかし、ハイライト、内側の光、背景を調整して、グラスモーフィズムのカードを作ります。
調整しながら、ライブプレビューの変化を見ます。
デザインに合う見た目に整えます。
きれいなHTMLかCSS、またはTailwindの設定をコピーします。

主な用途

モダンなUIに使う、すりガラス風のカードを作る。
グラスモーフィズムの効果を出すための、実用的なCSSを手に入れる。
Tailwindですぐ使えるグラスのコンポーネントを書き出す。

注意点

ガラスの見た目は、backdrop-filterと、その後ろにある変化のある背景に頼っています。ベタの色の上では、効果はわずかです。
backdrop-filterへの対応はブラウザによって異なります。使う予定のブラウザで試し、代わりの表示も用意してください。

よくある質問

コピーできる出力は、何ですか?

きれいなHTML、ふつうのCSS、Tailwindの設定のうち、お使いの環境に合うものです。

ページに置くと、ガラスが平らに見えるのはなぜですか?

グラスモーフィズムは、ぼかす対象の画像などが後ろにないと成り立たないからです。ベタの背景では、すりガラスにするものが何もありません。画像やグラデーションの上に置いてください。

何かアップロードされますか?

いいえ。このツールはすべてブラウザ内で動きます。

グラスカード作成

カードのプロパティ

カード要素のコンテンツ

グラスカード

使い方

主な用途

注意点

よくある質問

コピーできる出力は、何ですか?

ページに置くと、ガラスが平らに見えるのはなぜですか?

何かアップロードされますか?

関連ツール

使い方

主な用途

注意点

よくある質問

コピーできる出力は、何ですか?

ページに置くと、ガラスが平らに見えるのはなぜですか?

何かアップロードされますか?