Copy-and-paste CSS card designs

Article lists, work showcases, profiles—the card, which groups content into a single unit, is the most frequently used part in modern web design. This article collects 8 ready-to-use card designs, each with a live demo. Just copy and swap the text and images.

The basic form

The basic card

White background + rounded corners + a light shadow. These three things alone make the content read as a single unit. It’s the starting point for every card.

.card {
  width: 280px;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

For the shadow, “light and largely blurred” is the modern look. Using a light (lowered-opacity) black like rgba(0, 0, 0, 0.1) blends naturally even when the background color changes. The last 0.1 is the darkness—the smaller the number, the lighter it gets.

A card with an image (blog-article style)

Image on top, text below—the familiar form of a blog’s article list. The trick is to apply overflow: hidden to the card so the image doesn’t stick out past the card’s corners.

.card {
  overflow: hidden;   /* keep the image inside the rounded corners */
}
.thumb {
  height: 140px;
}

When you use it on your own site, replace <div class="thumb"> with <img class="thumb" src="…"> and add this CSS. Any aspect ratio of photo fits neatly.

img.thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;   /* keep aspect ratio, crop the overflow */
  display: block;
}

object-fit: cover means “enlarge to fill the frame and crop the parts that stick out.” Photos no longer get squished or stretched.

Move it on hover

A card that floats up softly

Hover over it and it lifts up with a deeper shadow—the most popular motion for card hovers. It becomes a “you can press this” cue.

.lift {
  transition: transform 0.25s, box-shadow 0.25s;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

A few px of lift is plenty. Move it too much and it gives a noisy impression.

A card where the image zooms

Only the photo part slowly enlarges. It’s perfect for sites where photos are the star, like work galleries and travel blogs.

.frame {
  overflow: hidden;   /* don't let the enlarged part spill out */
}
.zoom {
  transition: transform 0.4s;
}
.card:hover .zoom {
  transform: scale(1.08);
}

The mechanism is “put the image in a frame (a box with overflow: hidden) and enlarge only the contents.” The parts that stick out are hidden, so the card’s shape doesn’t change.

Various shapes

A horizontal card

A wide card with an image on the left and text on the right. It’s often used for notice lists and related-article links.

.row {
  display: flex;
  align-items: center;
}
.thumb {
  width: 90px;
  height: 90px;
  flex-shrink: 0;   /* keep the image from getting squished */
}

flex-shrink: 0 is quietly important. Even when the text gets long, the image won’t get squished.

A profile card

A round icon + name + a short line. It’s a staple of self-introduction pages and member intros.

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;   /* turn a square into a circle */
}

border-radius: 50% turns a square into a circle. The same setting works when you use an <img> too.

A card with a colored accent

Just adding a single color bar on the left edge makes a card you can categorize by type, like “notice” or “caution.”

.accent {
  border-left: 6px solid;
}
.orange { border-color: #ff8a3d; }
.green { border-color: #2ec46f; }

The trick is to not write the color on the .accent side. Decide only the thickness and line style, and leave the color to color classes like .orange or .green. This way, however many types you add, the CSS is just one line each. Making the bar (6px) thinner gives a tasteful look, and thicker gives a pop impression.

Cards shine when lined up

Lay cards out in a grid

A card shows its true worth when neatly lined up, more than on its own. With display: grid, you can make a list in three lines of CSS that wraps on its own even as the count grows.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

minmax(140px, 1fr) means “keep each one at 140px or more, and split the leftover width evenly.” On both phone and desktop, it automatically becomes just the right number of columns.

Use different shadow darkness for different cases

The numbers of box-shadow are, from the left, “horizontal offset, vertical offset, blur, color.” Using three levels according to the height you want to float gives the screen a sense of consistency.

/* Subtle (when lining up many in a list) */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

/* Normal (the base form in this article) */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

/* Strong (a standout card, or on hover) */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

The trick is to make the “vertical offset” and “blur” larger the higher you float it. Imagining light hitting from above gives you a natural shadow.

Make the whole card a link

It’s helpful if an article card lets you jump to the article by pressing anywhere. Wrap the whole card content in an <a>, and cancel the link’s underline and blue color.

<a class="card-link" href="article.html">
  <article class="card">…card contents…</article>
</a>

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

color: inherit means “use the same text color as the surroundings.” It’s the one line that keeps the link-specific blue from appearing inside the card.

A checklist for when cards go wrong

• The image sticks out past the rounded corners → Did you add overflow: hidden to the card body?
• All the text inside the card is blue → After wrapping in an <a>, add color: inherit and text-decoration: none.
• The image in a horizontal card is squished → Add flex-shrink: 0 on the image side.
• The shadow isn’t visible / it doesn’t look lifted → On a white background, a white card’s shadow doesn’t stand out. Making the page background a light gray or beige makes the card stand out.

Summary

1. The basics of a card are the three ingredients white background + rounded corners + a light shadow—the shadow is “light, largely blurred.”
2. Hover motion (floating up, image zoom) is a cue that it can be pressed—keep the amount of movement modest.
3. When lining them up, use display: grid + auto-fill for a list that won’t break even as the count grows.

Start by copying the basic card and pouring in the info of your own articles or works. Your page will look far more finished right away.