Open menu

CSS Card Generator

Build cards for products, articles, team members, pricing plans and dashboards. Choose from six layouts, set padding, corner radius, shadow and border, toggle the image and button, and add a hover effect such as lift, glow, border highlight or image zoom. The checks cover title, body text and button contrast, and you can copy semantic HTML with CSS, SCSS, a Tailwind component class or a React component.

Preset gallery
Placeholder landscape

Mountain retreat

A quiet cabin with sweeping views, hiking trails and a wood-fired sauna.

Learn more

Accessibility checks

  • Pass The title has 17.9:1 contrast with the card, which meets WCAG AA.
  • Pass Body text has 6.6:1 contrast, which meets WCAG AA.
  • Pass Button text has 6.3:1 contrast with the accent color.
  • Pass Remember to describe the image in its alt text, or use alt="" if it is purely decorative.

Export code

<article class="card">
  <img class="card__media" src="image.jpg" alt="Describe the image" width="400" height="240">
  <div class="card__body"><h3 class="card__title">Mountain retreat</h3><p class="card__text">A quiet cabin with sweeping views, hiking trails and a wood-fired sauna.</p><a class="card__button" href="#">Learn more</a></div>
</article>
Favourites on this device (0)

No favourites yet.

Layout & content
Size & shape
Colors

How to use the card generator

  1. Pick a layout: vertical, horizontal, text over image, profile, pricing or statistic.
  2. Edit the content: title and text, and whether to show the image and button.
  3. Shape the box: width, padding, corner radius, shadow size and border.
  4. Add a hover effect: lift, glow, border highlight or image zoom.
  5. Set the colors: card, text, accent (button) and the page background.
  6. Export HTML and CSS, SCSS, Tailwind or React.

How it’s built

Cards use BEM class names (card, card__body, card__title, card__button) so the CSS stays flat and easy to override. Each card is a flex column, or a two-column grid for the horizontal layout. Images use object-fit: cover with a fixed aspect ratio, so photos of different sizes line up without distortion and without layout shift.

Worked examples

Example 1: a product grid

Load Classic, set the width to 300px and the hover to Lift. Place several cards in display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px. The lift on hover and focus tells people the card is interactive.

Example 2: a team page

Load Profile. The circular avatar has a ring in your accent color, and the content is centered. Use the person’s role as the meta line and a short bio as the text.

Example 3: a pricing table

Use Pricing for standard plans and Pricing featured for the recommended one: a stronger shadow, no border and a contrasting accent draw the eye. Keep plan features short and parallel so they’re easy to compare.

Tips

  • Describe images in their alt text, or use alt="" for purely decorative photos.
  • Don’t rely on shadow alone to separate cards from a same-colored background. Add a border or a slightly different card color.
  • Keep hover effects subtle and quick (around 200–300ms).
  • The reduced-motion rule turns off transitions for people who prefer less motion.

Common mistakes

  • Text over busy photos. In overlay cards, the gradient behind the text keeps it readable. Don’t remove it.
  • Inconsistent padding. Use the same padding on every card in a grid, so edges and text line up.

Frequently asked questions

Why are the cards article elements?

A card usually holds a self-contained piece of content, such as a product, a post or a profile, which is exactly what <article> means. It helps screen-reader users jump between items in a list. Use a heading for the title so the card appears in the page outline.

Why does the hover effect also run on focus?

The effect uses :hover and :focus-within, so keyboard users who tab to the card's button see the same lift or glow as mouse users.

Should the whole card be clickable?

It's common, but put a real link on the title or button and, if needed, stretch its click area with a pseudo-element. Wrapping the whole card in a link makes screen readers read everything inside as one long link name.

How do I keep cards the same height in a grid?

Place them in a CSS grid or flex row. Each card is a flex column, so you can push the button to the bottom with margin-top: auto on the button.

Do cards need a heading?

Yes, ideally. A heading in each card lets screen reader users jump between cards by heading, and gives the card an accessible name if it's a link.

Sources