서리 낀 유리: 라일락, 핑크, 짙은 보라 위의 골진 유리 그라데이션
서리 낀 유리에서는 세로 패널 16개가 라일락, 부드러운 핑크, 짙은 보라 메시를 굴절시켜, 색이 있는 빛 앞에 골진 유리를 댄 듯한 모습을 만듭니다. 유리는 70, 부드러움은 60으로 설정되어 각 패널이 뒤의 블러를 어긋나게 하고 한쪽 가장자리에 가는 하이라이트를 받습니다. 그레인은 8에 불과해 표면이 깨끗하고, 종이보다 유리에 가깝습니다.
나만의 스타일로 만들기
패널 리듬 바꾸기
요금제 카드 뒤에 넓고 차분한 살을 두려면 패널 수를 줄이세요. 16 대신 8을 써 보세요. 30까지 올리면 카드 미리보기 같은 작은 크기에서도 유지되는 촘촘한 골 무늬 텍스처가 됩니다.
굴절 누그러뜨리기
유리 70은 색을 강하게 휘게 합니다. 35 정도면 패널이 은근한 암시 수준이 되어 긴 텍스트 아래에서 더 안전합니다. 완성도 비교를 켜면 유리가 있는 메시와 없는 메시를 나란히 볼 수 있습니다.
자주 묻는 질문
이것은 CSS backdrop-filter 같은 실제 배경 블러인가요?
아니요. 유리 효과는 그라데이션 자체에 그려집니다. 이미지가 세로 패널로 나뉘고 각 패널이 뒤의 색을 어긋나게 합니다. 서리 낀 느낌을 완성된 배경으로 얻게 되므로, 이를 위해 페이지에서 실시간으로 블러 처리할 것은 없습니다.
사용 방법
시작점 고르기
소프트 메쉬, 일식 광선, 리소 하프톤 등 28가지 스타일 중 하나로 시작하거나, 그라데이션 유형과 24가지 팔레트 중 하나를 선택하세요.
그라데이션 다듬기
크기, 왜곡, 소용돌이, 부드러움을 조정하고, 그레인, 유리 패널이나 유리 타일, 점, 그리드, 선 오버레이, 혼합된 두 번째 레이어, 또는 하프톤이나 픽셀 정렬 같은 처리 효과를 추가하세요. 애니메이션을 켜고 속도를 따로 설정할 수도 있습니다.
미리 보고 사용하기
랜딩 페이지, 카드, 모바일, 회원가입 레이아웃에서 그라데이션을 확인하세요. 그런 다음 무료 UX Pilot 계정으로 로그인하면 캔버스에서 사용하거나 내보낼 수 있습니다.