---
category: Display
created: '2021-04-04'
description: Create a layered card with CSS
keywords: css layered card
thumbnail: /assets/css-layout/thumbnails/layered-card.png
title: Layered card
---

## HTML

```html index.html
<div class="layered-card">
    <div class="layered-card__content"></div>
</div>
```

## CSS

```css styles.css
.layered-card {
    position: relative;

    /* Demo */
    height: 6rem;
    width: 6rem;
}

.layered-card::before {
    background: #d1d5db;
    content: '';

    /* Position */
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(1rem, 1rem);

    /* Size */
    height: 100%;
    width: 100%;

    /* Display under the main content */
    z-index: 0;
}

.layered-card__content {
    /* Position */
    left: 0;
    position: absolute;
    top: 0;

    /* Size */
    height: 100%;
    width: 100%;

    z-index: 1;

    background: #fff;
}
```

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

    /* Demo */
    height: 6rem;
    width: 6rem;
}

.layered-card::before {
    background: #d1d5db;
    content: '';

    /* Position */
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(1rem, 1rem);

    /* Size */
    height: 100%;
    width: 100%;

    /* Display under the main content */
    z-index: 0;
}

.layered-card__content {
    left: 0;
    position: absolute;
    top: 0;

    /* Size */
    height: 100%;
    width: 100%;
    z-index: 1;

    border: 1px solid #d1d5db;
    background: #fff;
}
```

```html index.html hidden
<div class="layered-card">
    <div class="layered-card__content"></div>
</div>
```
</Playground>