글래스 카드 빌더

블러·그라데이션 글래스모피즘 카드 디자인.

카드 속성

백드롭 블러: 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)
  );
}

작동 방식

blur, 하이라이트, 안쪽 글로우, 배경을 조정해 glassmorphism 카드를 만듭니다.
조정하는 대로 실시간 미리보기가 갱신되는 것을 봅니다.
효과를 디자인에 맞춥니다.
깔끔한 HTML, CSS 또는 Tailwind 설정을 복사합니다.

주요 용도

현대적인 UI를 위한 프로스트 글래스 카드를 만듭니다.
glassmorphism 효과의 프로덕션 CSS를 얻습니다.
Tailwind 준비가 된 글래스 컴포넌트를 내보냅니다.

참고 사항

글래스 룩은 backdrop-filter와 그 뒤의 복잡한 배경에 의존합니다. 단색 위에서는 효과가 미묘합니다.
backdrop-filter 지원은 제각각입니다. 대상 브라우저에서 테스트하고 대체 수단을 제공하세요.

자주 묻는 질문

어떤 출력을 복사할 수 있나요?

깔끔한 HTML, 순수 CSS, 또는 Tailwind 설정 중 스택에 맞는 것을 복사할 수 있습니다.

제 페이지에서 왜 글래스가 밋밋해 보이나요?

glassmorphism은 흐릴 시각적 콘텐츠가 뒤에 있어야 합니다. 단색 배경 위에는 프로스트할 것이 없으므로, 이미지나 그라데이션 위에 배치하세요.

업로드되는 것이 있나요?

아니요. 빌더는 전적으로 브라우저에서 실행됩니다.

글래스 카드 빌더

카드 속성

카드 요소 콘텐츠

글래스 카드

작동 방식

주요 용도

참고 사항

자주 묻는 질문

어떤 출력을 복사할 수 있나요?

제 페이지에서 왜 글래스가 밋밋해 보이나요?

업로드되는 것이 있나요?

관련 도구

작동 방식

주요 용도

참고 사항

자주 묻는 질문

어떤 출력을 복사할 수 있나요?

제 페이지에서 왜 글래스가 밋밋해 보이나요?

업로드되는 것이 있나요?