CSS 유리 효과 카드 적용: 생성값·대체 배경·레이아웃 확인

CSS 생성기에서 만든 카드를 실제 화면에 적용하기

CSS 도구를 추가할 당시에는 팔레트, 그라데이션, 애니메이션, Grid, Flexbox, 모서리, 그림자, 유리 효과를 기능별로 소개했습니다. 실제 페이지에서는 이 속성들이 한 요소에 함께 적용됩니다. 여기서는 Glassmorphism 생성기의 카드 하나를 예로 들어, 출력 CSS를 읽고 기존 화면에 옮기는 순서를 정리합니다.

먼저 입력값과 출력 속성을 연결

현재 생성기의 값은 색상과 배경 불투명도, 흐림, 채도, 테두리 불투명도, 모서리 반경, 그림자 불투명도, 내부 여백입니다. 아래는 비교를 위한 입력 예입니다.

입력	값	결과에서 확인할 항목
색상·불투명도	흰색 `#ffffff`, 20%	배경의 알파 값 `0.20`
흐림·채도	12px, 140%	`blur(12px) saturate(140%)`
모서리·여백	24px, 32px	`border-radius`, `padding`
테두리·그림자 불투명도	30%, 20%	각각의 rgba 알파 값

생성 결과에는 다음과 같은 선언이 포함됩니다.

.glassmorphism-card {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

이 코드를 넣기만 해서는 적용 대상을 찾지 못할 수 있습니다. 사용할 카드의 클래스가 .glassmorphism-card인지 확인하거나 선택자를 자신의 카드 클래스로 바꿉니다. 글자색과 글꼴은 이 출력에 포함되지 않으므로 실제 화면의 본문 스타일도 함께 확인합니다.

흐림이 보이지 않을 때 확인할 순서

backdrop-filter는 요소 뒤에 있는 배경에 효과를 적용합니다. 따라서 같은 단색 배경 위에서는 흐림을 키워도 변화가 잘 보이지 않을 수 있습니다. 배경 불투명도를 100%로 설정하면 뒤쪽 모습이 가려지기도 합니다. MDN backdrop-filter 설명

먼저 색상 차이가 있는 배경 위에서 불투명도 20%, 흐림 0px와 12px를 비교합니다. 그다음 실제 사용할 배경으로 바꾸고 글자를 읽어 봅니다. 생성기의 미리보기 배경에서 보기 좋은 값이 사진이나 복잡한 표 위에서도 읽기 좋다는 뜻은 아닙니다.

부모 요소의 불투명도나 다른 필터, 주변 겹침 구조도 효과에 영향을 줄 수 있습니다. 기존 스타일과 합쳤을 때 달라졌다면 카드 단독 예제와 실제 페이지를 비교해 어느 속성이 덮어쓰는지 확인합니다.

필터를 지원하지 않는 환경의 대체 배경

현재 출력에는 @supports not (...) 조건이 함께 들어갑니다. 필터 미지원 환경에서 카드 배경을 더 불투명하게 표시하는 용도이며, 배경 알파 값은 설정값과 88% 중 큰 값입니다. 위 예제의 대체 배경은 rgba(255, 255, 255, 0.88)입니다.

복사할 때 첫 번째 카드 규칙만 가져오면 이 대체 규칙이 빠집니다. 전체 CSS를 붙여 넣은 뒤, 실제 지원 브라우저에서 필터를 끈 모습도 확인합니다. 이 대체 배경이 글자 대비나 접근성을 자동 인증하는 것은 아닙니다. 버튼·링크·작은 보조 문구까지 읽을 수 있는지 직접 살펴야 합니다.

레이아웃과 장식은 적용 범위를 분리

카드 두 개를 나란히 배치하려면 카드의 유리 효과와 별도로 부모 요소의 Flexbox 또는 Grid 구성이 필요합니다. Flexbox Playground에서 만든 부모 정렬 속성을 카드 자체에 붙이면 기대한 두 열 배치가 나오지 않을 수 있습니다.

또한 CSS 그라데이션 생성기에서 복사한 background를 같은 카드 규칙의 뒤에 붙이면 기존 rgba 배경이 바뀝니다. 유리 효과용 카드 앞뒤의 배경을 구분하고, 그라데이션을 부모 배경에 쓸지 카드 배경에 쓸지 먼저 정합니다.

배포 전에 비교할 네 장면

짧은 제목과 두 줄 설명이 있는 기본 카드.
긴 제목, 긴 URL, 여러 줄 버튼 문구가 들어간 카드.
좁은 모바일 폭에서 여백 때문에 본문이 지나치게 줄어드는 장면.
필터를 끄거나 배경 이미지를 바꿨을 때의 글자와 버튼.

생성기의 출력값은 디자인을 조정하는 출발점입니다. 이 글의 CSS와 대체 배경 수치는 2026년 9월 22일 생성 함수의 결과와 대조했습니다. 사용 중인 사이트의 반응형 레이아웃이나 대비 검사를 대신한 결과는 아닙니다.