Design Atlas
한국어
⬡ Icons & illustration

3D Icon (CSS-Shaded)

3D 아이콘 (CSS 셰이딩)

An icon that fakes a glassy, glossy dimensional look with nothing but CSS gradients and shadows — no actual 3D rendering.

Also known as: 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)}}

A 3D icon fakes a glassy, glossy dimensional look with nothing but CSS gradients and shadows — no actual 3D rendering involved. The glassy app-icon and emoji look that's been trending since 2023 is the clearest example.

Building one is really about stacking three layers. A radial gradient going from light to dark, top-left to bottom-right, implies a light source. An inset white highlight suggests a reflection on the inner surface, and a dark drop shadow underneath gives it weight. Unlike an actual three.js render, the lighting angle is baked in and fixed — it won't follow the viewer the way real 3D would.

The upside is the rendering cost is essentially free — pure CSS, no images or WebGL — and it stays crisp at any resolution the way vector art does. Pile that much glossy shine across a whole screen, though, and it gets noisy fast, so it's usually reserved for the few things meant to be the "hero" — an app icon, a handful of buttons that need to stand out.

When to use

Concentrate it on the few things meant to be the hero — an app icon, a handful of standout buttons. Applying the gloss everywhere on screen gets noisy fast.