배경

유리 뒤에 아무것도 없으면 backdrop blur 가 할 일이 없습니다. 그래서 배경을 완전히 비우지는 않습니다.

다만 파랑·보라·민트 삼색 블롭은 뺐습니다. 서로 다른 색상환 세 지점을 균등하게 흩뿌린 배경은 사람이 고른 색이 아니라 색상환을 3등분한 결과처럼 보입니다. 브랜드 파랑 한 계열 안에서 두 톤만 쓰고, 위치도 대칭을 피합니다.

블롭은 정적입니다 — 저사양 기기에서도 안전합니다. 다크에서는 같은 색상에서 명도만 낮춥니다. 밝은 파스텔을 어두운 배경에 얹으면 뿌연 얼룩이 됩니다.

import { UyooBackdrop } from "@uyoolabs/uyooglass/backdrop";

// 대시보드 레이아웃: 페이지 최상단에 한 번
<UyooBackdrop />
// 로그인 화면
<UyooBackdrop variant="auth" />

두 변형

대시보드는 기본값, 로그인 화면은 auth 입니다.

variant="dashboard"

유리 카드가 블롭을 굴절시킵니다.

variant="auth"

유리 카드가 블롭을 굴절시킵니다.

이 페이지에서 바꿔 보기

사이트 전체 배경을 바꿉니다. 페이지를 떠나면 원복합니다.

블롭 색

backdrop.css

클래스변형라이트다크
uyoo-blob-adashboardoklch(0.85 0.09 240)oklch(0.42 0.1 240)
uyoo-blob-bdashboardoklch(0.86 0.08 300)oklch(0.38 0.08 290)
uyoo-blob-auth-aauthoklch(0.86 0.07 242)oklch(0.42 0.1 240)
uyoo-blob-auth-bauthoklch(0.88 0.045 262)oklch(0.38 0.06 262)