---
category: Display
created: '2019-12-25'
description: Create stacked cards with CSS
keywords: css card, css stacked cards, css transform rotate
thumbnail: /assets/css-layout/thumbnails/stacked-cards.png
title: Stacked cards
---

## HTML

```html index.html
<div class="stacked-cards">
    <!-- Repeat if you want to have more cards -->
    <div class="stacked-cards__card"></div>

    <!-- Main card's content -->
    ...
</div>
```

## CSS

```css styles.css
.stacked-cards {
    /* Used to position the stacked cards */
    position: relative;

    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
}

.stacked-cards__card {
    /* Absolute position */
    left: 0px;
    position: absolute;
    top: 0px;

    /* Take full size */
    height: 100%;
    width: 100%;

    /* Displayed under the container */
    z-index: 1;

    /* Background and border colors */
    background-color: rgb(255, 255, 255);
    border: 1px solid #d1d5db;

    /* Rotate it. Change the number of degrees for the following cards */
    transform: rotate(5deg);
}
```

<Playground>
```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}

.stacked-cards {
    /* Used to position the stacked cards */
    position: relative;

    /* Demo */
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    height: 16rem;
    width: 16rem;
}

.stacked-cards__card {
    /* Absolute position */
    left: 0px;
    position: absolute;
    top: 0px;

    /* Take full size */
    height: 100%;
    width: 100%;

    /* Displayed under the container */
    z-index: 1;

    /* Background and border colors */
    background-color: rgb(255, 255, 255);
    border: 1px solid #d1d5db;
}
.stacked-cards__card--1st {
    /* Rotate it. Change the number of degrees for the following cards */
    transform: rotate(5deg);
}
.stacked-cards__card--2nd {
    /* Rotate it. Change the number of degrees for the following cards */
    transform: rotate(10deg);
}
.stacked-cards__card--3rd {
    /* Rotate it. Change the number of degrees for the following cards */
    transform: rotate(15deg);
}
```

```html index.html hidden
<div class="stacked-cards">
    <div class="stacked-cards__card stacked-cards__card--1st"></div>
    <div class="stacked-cards__card stacked-cards__card--2nd"></div>
    <div class="stacked-cards__card stacked-cards__card--3rd"></div>
</div>
```
</Playground>