> For the complete documentation index, see [llms.txt](https://docs.mydukaan.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydukaan.io/code-snippets/adding-shadow-to-product-cards.md).

# Adding shadow to product cards

You can make the product cards more fancy by adding some shadow to it so that it highlights and looks funky.

```css
.card {
  border-radius: 10px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
  padding: 20px;
  background-color: #F7F7F7;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
  background-color: #FFC107;
}
```

The above CSS makes the card with rounded edges, a shadow effect, and a light grey background. When you hover over the card, it will move up slightly, the shadow effect will get stronger, and the background color will change to a yellowish color.

Add this CSS to the layout.css file and deploy the changes.

This is how the card looked previously

<figure><img src="/files/fF3WtEqeiodzTa62vXdQ" alt=""><figcaption></figcaption></figure>

This is how it looks after adding the CSS, where the middle card is hovered upon.

<figure><img src="/files/b1vXLyCAX7igMeGfnsOs" alt=""><figcaption></figcaption></figure>