08글래스모피즘 블러
반투명 카드 배경에 backdrop-filter: blur() 가 걸려 있다가, 호버하면 블러와 채도가 더 짙어지며 유리 표면이 빛을 받은 것처럼 밝아진다.
쓰임다크 배경 위 프리미엄 카드, 대시보드 위젯
backdrop-filter: blurrgba 배경saturate()
<main class="stage stage--glass">
<span class="bg-blob" aria-hidden="true"></span>
<article class="card is-demo" tabindex="0">
<div class="card__body">
<h3 class="card__title">프리미엄 위젯</h3>
<p class="card__meta">실시간 통계</p>
</div>
</article>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-base; // 블러·채도가 짙어지는 시간
$easing: $ease-out;
$color: $error; // 배경 블롭 강조색
@include stage($stage-paper);
.stage { padding: clamp(8px, 2.4vw, 16px); position: relative; overflow: hidden; }
.bg-blob {
position: absolute;
inset: -20%;
background:
radial-gradient(circle at 30% 30%, $subject-blue, transparent 60%),
radial-gradient(circle at 70% 70%, $color, transparent 60%);
}
.card {
position: relative;
z-index: 1;
width: min(150px, 48vw);
aspect-ratio: 4 / 3;
border-radius: $r-card;
padding: $sp-3;
box-sizing: border-box;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
box-shadow: $shadow-press;
outline: none;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
transform: translateY(0);
transition: backdrop-filter $duration $easing, background $duration $easing, box-shadow $duration $easing, transform $duration $easing;
}
.card__title { margin: 0 0 $sp-1; font-weight: 700; font-size: clamp(12px, 3.4vw, 14px); line-height: 1.3; font-family: inherit; color: $stage-ink; }
.card__meta { margin: 0; font-weight: 500; font-size: clamp(11px, 3vw, 12px); line-height: 1.3; font-family: inherit; color: rgba($stage-ink, .85); }
.card:hover,
.card:focus-visible,
.card:active {
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
background: rgba(255, 255, 255, .26);
box-shadow: $shadow-raised;
transform: translateY(-4px);
}
.card.is-demo { animation: glass-loop $dur-loop $easing infinite; }
@keyframes glass-loop {
0%, 15% {
backdrop-filter: blur(6px) saturate(120%);
background: rgba(255, 255, 255, .14);
box-shadow: $shadow-press;
transform: translateY(0);
}
45%, 75% {
backdrop-filter: blur(14px) saturate(160%);
background: rgba(255, 255, 255, .26);
box-shadow: $shadow-raised;
transform: translateY(-4px);
}
100% {
backdrop-filter: blur(6px) saturate(120%);
background: rgba(255, 255, 255, .14);
box-shadow: $shadow-press;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.card { transition: none; }
.card.is-demo { animation: none; backdrop-filter: blur(14px) saturate(160%); background: rgba(255, 255, 255, .26); transform: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.stage {
padding: clamp(8px, 2.4vw, 16px);
position: relative;
overflow: hidden;
}
.bg-blob {
position: absolute;
inset: -20%;
background: radial-gradient(circle at 30% 30%, #2f6df6, transparent 60%), radial-gradient(circle at 70% 70%, #c2361a, transparent 60%);
}
.card {
position: relative;
z-index: 1;
width: min(150px, 48vw);
aspect-ratio: 4/3;
border-radius: 16px;
padding: 12px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
outline: none;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
transform: translateY(0);
transition: backdrop-filter 300ms ease-out, background 300ms ease-out, box-shadow 300ms ease-out, transform 300ms ease-out;
}
.card__title {
margin: 0 0 4px;
font-weight: 700;
font-size: clamp(12px, 3.4vw, 14px);
line-height: 1.3;
font-family: inherit;
color: #17141a;
}
.card__meta {
margin: 0;
font-weight: 500;
font-size: clamp(11px, 3vw, 12px);
line-height: 1.3;
font-family: inherit;
color: rgba(23, 20, 26, 0.85);
}
.card:hover,
.card:focus-visible,
.card:active {
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
background: rgba(255, 255, 255, 0.26);
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
transform: translateY(-4px);
}
.card.is-demo {
animation: glass-loop 2s ease-out infinite;
}
@keyframes glass-loop {
0%, 15% {
backdrop-filter: blur(6px) saturate(120%);
background: rgba(255, 255, 255, 0.14);
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
transform: translateY(0);
}
45%, 75% {
backdrop-filter: blur(14px) saturate(160%);
background: rgba(255, 255, 255, 0.26);
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
transform: translateY(-4px);
}
100% {
backdrop-filter: blur(6px) saturate(120%);
background: rgba(255, 255, 255, 0.14);
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card.is-demo {
animation: none;
backdrop-filter: blur(14px) saturate(160%);
background: rgba(255, 255, 255, 0.26);
transform: none;
}
}import type { CSSProperties } from "react";
import styles from "./GlassCard.module.scss";
export type GlassCardProps = {
title: string;
meta: string;
/** 블러·채도가 짙어지는 시간 (기본 300ms) */
duration?: number;
easing?: string;
/** 배경 블롭 강조색 */
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
export default function GlassCard({
title,
meta,
duration = 300,
easing = "ease-out",
color = "#c2361a",
}: GlassCardProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
return (
<div className={styles.stage} style={vars}>
<span className={styles.blob} aria-hidden="true" />
<article className={styles.card} tabIndex={0}>
<h3 className={styles.title}>{title}</h3>
<p className={styles.meta}>{meta}</p>
</article>
</div>
);
}08 글래스모피즘 블러 — 측정 누적면적 12.276% · 움직인 프레임 12/23GODRICH 원작 · zip 에 SCSS·React 포함 · CSS 카드 효과 9가지 — 호버 인터랙션 모음
이 데모가 속한 글
CSS 카드 효과 9가지 — 호버 인터랙션 모음CSS 카드 효과는 마우스를 올리거나 카드를 선택했을 때 상품·포스트 카드가 살짝 움직이면서 정보를 더 보여주는 짧은 시각 변화입니다. 상품·포스트 카드에 바로 붙일 수 있는 아홉 가지를 실제로 렌더링해서 모았고, 이 글의 데모 전부 보기
