CSS Box Shadow Card Effect

Creating a 3D card with pure CSS

CSS box-shadow is a powerful way to add depth and realism to your UI. In this tutorial, you’ll learn how to build a soft 3D card that slightly lifts when hovered. It’s made with pure CSS, optimized for smooth performance, and easy to customize for any design.

HTML

<div class="block">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetur adipiscing elit sed do.</li>
    <li>Tempor incididunt ut labore et dolore.</li>
    <li>Magna aliqua ut enim ad minim veniam.</li>
    <li>Quis nostrud exercitation ullamco laboris.</li>
  </ul>
</div>

CSS

.block {
  width: 300px;
  background-color: #6759dc;
  margin: 40px auto;
  padding: 25px 30px;
  color: #ffffff;
  box-shadow:
    rgba(118, 87, 255, 0.4) 5px 5px,
    rgba(118, 87, 255, 0.3) 10px 10px,
    rgba(118, 87, 255, 0.2) 15px 15px,
    rgba(118, 87, 255, 0.1) 20px 20px,
    rgba(118, 87, 255, 0.05) 25px 25px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.block:hover {
  background-color: #7b5edc;
  transform: translateY(-10px) scale(1.02);
}

How it works

The .block element represents a content card. By stacking several shadows with decreasing opacity, you create a sense of soft elevation. This technique is known as layered box-shadow, and it’s one of the cleanest ways to simulate natural depth.

Box-shadow explained

Each shadow has a specific offset, blur, and opacity.

...
box-shadow:
  rgba(118, 87, 255, 0.4) 5px 5px,
  rgba(118, 87, 255, 0.3) 10px 10px,
  rgba(118, 87, 255, 0.2) 15px 15px,
  rgba(118, 87, 255, 0.1) 20px 20px,
  rgba(118, 87, 255, 0.05) 25px 25px;
...

The first values control horizontal and vertical offset, while the color alpha defines how intense each layer appears. Smaller offsets give tighter shadows, and larger ones create softer edges.
Each layer contributes to a smooth depth gradient that feels more natural than a single shadow.

If you want to experiment with different shadow stacks, use our CSS box-shadow generator – https://csslab42.com/css-box-shadow-generator/ to build and preview your design.

Transform and transition

The motion is powered by transform and transition.

...
transition: transform 0.25s ease;
transform: translateY(-10px) scale(1.02);
...

The transform property moves the element using GPU acceleration, which ensures a smooth hover animation. transition defines the duration and easing curve. Together they make the card appear to float when hovered.

Hover interaction

The hover state slightly changes the background color and lifts the card upward, simulating an interactive surface.

...
.block:hover {
  background-color: #7b5edc;
  transform: translateY(-10px) scale(1.02);
}
...

The subtle movement combined with color change gives users a clear visual cue that the element is clickable.

Tip: Use subtle transitions and moderate elevation. Too many layers or strong offsets can make the shadow look artificial, especially on light backgrounds.

Customization tips

• Adjust shadow offsets and opacity to control depth.
• Change background colors for different UI sections.
• Add border-radius for soft, modern card corners.
• Experiment with pastel colors for soft UI or bright ones for glowing themes.
• Use multiple .block elements to create a grid layout.

Browser compatibility & performance

This box-shadow effect works in all modern browsers (Chrome, Edge, Firefox, Safari). Since the animation relies on transform, it runs on the GPU for maximum performance and smoothness. No JavaScript is required.

Summary

Now you have a reusable, lightweight 3D card built entirely with pure CSS. Layered shadows and subtle motion give your design a polished, professional touch that fits any modern UI layout.