Blog

Posted by

October 9, 2026

On October 9, 2026

How to Create 3D Social Media Icons with CSS

CSS transforms can turn flat social media links into angled 3D tiles. In this tutorial, you will build Facebook, X, LinkedIn, YouTube, and Instagram icons with colored side faces, a hover lift, visible keyboard focus, and reduced-motion support. The effect uses HTML and CSS only; JavaScript and an icon library are not required.

Try the Live Demo Download Source ZIP

What you will build

Each tile is a regular HTML link inside a list. CSS perspective, rotation, and skew create the angled front face. The ::before and ::after pseudo-elements add two colored sides, while layered shadows make the tile look raised. Hovering or keyboard-focusing a link lifts it slightly. Flexbox lets the icons wrap on narrow screens.

HTML structure for the social links

Use a list to group the links and give each one an accessible name. The visible letters and symbols keep the example lightweight. Replace the sample platform homepages with your own profile URLs before using the links on your site.

How the CSS 3D effect works

1. Arrange the icons with Flexbox

The list uses display: flex, flex-wrap: wrap, and gap to center the tiles and preserve space between them as the screen gets narrower.

2. Build the raised tile faces

The link is the front face. Its transform combines perspective, rotation, and skew. Two positioned pseudo-elements create the left and bottom faces, and the shadow adds depth.

3. Add hover and keyboard feedback

The hover and :focus-visible states share the lift effect. Press Tab to move through the links and check the clear outline without using a mouse.

4. Customize each platform

Each platform class sets front, dark-side, and light-side colors with CSS custom properties. Change those values to match your design and replace each href with the correct destination.

Accessibility and reduced motion

Each link has an accessible name, and the visible focus outline helps keyboard users see which icon is selected. A prefers-reduced-motion media query shortens the transition for visitors whose device settings request less motion. Links remain usable when animation is reduced.

Troubleshooting

The 3D sides are missing: Confirm both pseudo-elements have content: "", and that each link has position: relative and isolation: isolate.

The icons open the wrong pages: Replace the sample platform URLs with your own profile links.

The animation feels too strong: Reduce the hover translate() distance or adjust the skew and shadow offsets.

Frequently asked questions

Can I make 3D social media icons with CSS only?

Yes. CSS transforms, shadows, and pseudo-elements create the 3D effect. HTML provides the links; JavaScript is not needed.

Do these icons need an icon library?

No. This example uses text marks and CSS. You can replace the marks with SVG icons if you prefer.

Do the links work on phones and tablets?

Yes. Each icon remains a normal clickable link on touch screens. Hover only adds a visual effect.

How do I change the colors?

Update the --brand, --brand-dark, and --brand-light values in each platform class.

Conclusion

Two pseudo-elements and a reusable link style are enough to create lightweight 3D social media icons with CSS. Add your profile URLs, keep keyboard focus visible, and tune the colors and movement to fit your site.

Try the CSS 3D social media icons

Hover over a tile or press Tab to see the 3D lift. Click or tap a link to open its platform.

HTML markup for 3D social media links

<ul class="social-list" aria-label="Social media links">
  <li><a class="social-link social-link--facebook" href="https://www.facebook.com/" aria-label="Facebook">f</a></li>
  <li><a class="social-link social-link--x" href="https://x.com/" aria-label="X">X</a></li>
  <li><a class="social-link social-link--linkedin" href="https://www.linkedin.com/" aria-label="LinkedIn">in</a></li>
  <li><a class="social-link social-link--youtube" href="https://www.youtube.com/" aria-label="YouTube">▶</a></li>
  <li><a class="social-link social-link--instagram" href="https://www.instagram.com/" aria-label="Instagram">◎</a></li>
</ul>

CSS for 3D transforms and hover effect

.social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 42px 36px;
  margin: 54px 0 40px;
  padding: 0;
  list-style: none;
}

.social-link {
  --brand: #1877f2;
  --brand-dark: #1058b5;
  --brand-light: #5a9cff;
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  box-shadow: -9px 9px 0 var(--brand-dark),
    -18px 18px 18px rgb(20 37 75 / 18%);
  font-size: 1.7rem;
  font-weight: 800;
  text-decoration: none;
  transform: perspective(700px) rotate(-30deg) skew(18deg);
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
}

.social-link::before,
.social-link::after {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--brand-dark);
  transition: inherit;
}

.social-link::before {
  top: 5px;
  left: -10px;
  width: 10px;
  height: 100%;
  transform: skewY(-45deg);
}

.social-link::after {
  right: 5px;
  bottom: -10px;
  width: 100%;
  height: 10px;
  transform: skewX(-45deg);
  background: var(--brand-light);
}

.social-link:hover,
.social-link:focus-visible {
  transform: perspective(700px) rotate(-30deg) skew(18deg)
    translate(9px, -9px);
  box-shadow: -16px 16px 0 var(--brand-dark),
    -26px 26px 24px rgb(20 37 75 / 22%);
}

.social-link:focus-visible {
  outline: 3px solid #17294f;
  outline-offset: 8px;
}

.social-link--facebook {
  --brand: #1877f2;
  --brand-dark: #1058b5;
  --brand-light: #5a9cff;
}

.social-link--x {
  --brand: #17191f;
  --brand-dark: #050608;
  --brand-light: #41444c;
}

.social-link--linkedin {
  --brand: #0a66c2;
  --brand-dark: #064b91;
  --brand-light: #3d8bd7;
  font-size: 1.25rem;
}

.social-link--youtube {
  --brand: #f20d0d;
  --brand-dark: #b80707;
  --brand-light: #ff5555;
  font-size: 1.35rem;
}

.social-link--instagram {
  --brand: #c13584;
  --brand-dark: #81235e;
  --brand-light: #f77737;
  font-size: 1.45rem;
}

@media (max-width: 520px) {
  .social-list {
    gap: 36px 30px;
    margin: 48px 0 34px;
  }

  .social-link {
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
  }

  .social-link--linkedin { font-size: 1.1rem; }
  .social-link--youtube { font-size: 1.15rem; }
  .social-link--instagram { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social-link,
  .social-link::before,
  .social-link::after {
    transition-duration: .01ms;
  }
}

Recent Posts

Advanced Variable products with swatches