디자인 아틀라스
EN
⬡ 아이콘·일러스트

3D 아이콘 (CSS 셰이딩)

3D Icon (CSS-Shaded)

실제 3D 렌더링 없이 CSS 그레이디언트와 그림자만으로 유리·플라스틱 같은 광택 입체감을 흉내 낸 아이콘.

다른 이름: Glossy iconCSS 3D icon
···
html
<div class="stage">
  <div class="icon3d">
    <svg viewBox="0 0 24 24" width="46%">
      <defs><linearGradient id="g2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".9"/><stop offset="1" stop-color="#fff" stop-opacity=".4"/></linearGradient></defs>
      <path d="M13 2 4 14h7l-1 8 9-12h-7Z" fill="url(#g2)"/>
    </svg>
  </div>
</div>
css
.stage{display:grid;place-items:center;width:100%;height:100%;perspective:600px}
.icon3d{width:clamp(56px,22vmin,92px);aspect-ratio:1;border-radius:26%;
  background:radial-gradient(120% 120% at 28% 20%, var(--accent-2) 0%, var(--accent) 55%, color-mix(in srgb,var(--accent) 60%, black) 100%);
  box-shadow:0 10px 20px -6px color-mix(in srgb,var(--accent) 50%, black), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -6px 10px rgba(0,0,0,.25);
  display:grid;place-items:center;animation:tilt 3.2s ease-in-out infinite;transform-style:preserve-3d}
@keyframes tilt{0%,100%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(8deg) rotateY(-10deg)}}

3D 아이콘은 실제 3D 렌더링 없이, CSS 그레이디언트와 그림자만으로 유리·플라스틱처럼 광택이 도는 입체감을 흉내 낸다. 2023년 이후 앱 아이콘·이모지 트렌드에서 많이 보이는 "글래시(glassy)"한 룩이 대표적인 예다.

만드는 방법은 세 겹을 쌓는 것에 가깝다. 밑면에는 좌상단에서 우하단으로 어두워지는 방사형 그레이디언트를 깔아 광원 방향을 암시하고, 안쪽에는 흰색 inset 그림자로 하이라이트(반사광)를, 바깥쪽 아래에는 어두운 그림자로 무게감을 준다. 실제 three.js 렌더링과 달리 각도가 고정돼 있어서, 보는 위치가 바뀌어도 빛이 따라오지 않는다는 한계는 있다.

렌더링 비용이 사실상 0에 가깝고(이미지·WebGL 없이 순수 CSS) 벡터처럼 어느 해상도에서나 선명하다는 게 장점이다. 다만 광택 표현이 화면 전체에 많아지면 산만해지므로, 앱 아이콘이나 강조가 필요한 소수의 버튼처럼 "주인공" 역할을 하는 자리에 집중해서 쓴다.

언제 쓰나

앱 아이콘, 강조가 필요한 소수의 버튼처럼 주인공 역할을 하는 자리에 집중해서 쓰세요. 화면 전체에 광택을 입히면 산만해집니다.