Cards are everywhere on the web. Product listings, blog previews, team profiles, pricing plans, dashboard widgets, image galleries. If you have built a web app in the last five years, you have built cards.
The concept is simple: a contained rectangular surface that groups related information with a clear visual boundary. Getting cards to look right, behave consistently, and respond to different screen sizes involves more CSS decisions than most developers expect.
Card generators cut the guesswork. Instead of nudging padding, shadows, border radius, and hover effects until the card "looks right," you configure the design visually and export production-ready CSS.
Anatomy of a Well-Designed Card
A typical card has four visual layers, each serving a specific purpose:
The container defines the card's boundary. This is where you set width, border-radius, background color, and the shadow that lifts the card off the page. The shadow is what makes a card feel like a card rather than just a bordered box.
The media area (optional) usually sits at the top and holds an image, illustration, or icon. A consistent aspect ratio for the media area keeps cards aligned when displayed in a grid. Use object-fit: cover on images to prevent distortion.
The content area holds text: title, description, metadata (date, author, category). Consistent padding and font sizing across cards is critical. If one card has 16px padding and another has 24px, the grid looks messy.
The action area (optional) sits at the bottom and contains buttons or links. Pinning actions to the bottom of the card ensures they align horizontally across cards of different content heights.
The Card Generator lets you configure each of these layers independently. Adjust the shadow depth, border radius, padding, and content layout, then copy the CSS. Pair it with the Shadow Generator for fine-tuned shadow control.
CSS Grid and Flexbox Card Layouts
Cards almost always appear in groups, which means you need a layout system to arrange them.
CSS Grid is the best choice for card grids. It handles equal-height cards automatically and creates responsive layouts with minimal code:
`css
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
`
This one declaration creates a responsive grid where cards are at least 300px wide, automatically wrapping to new rows on smaller screens. No media queries needed for the basic layout.
For more control over the number of columns at specific breakpoints:
`css
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
`
Flexbox works for horizontal card carousels or single-row card layouts:
`css
.card-row {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.card {
flex: 0 0 300px;
scroll-snap-align: start;
}
`
This creates a horizontally scrollable row of cards with scroll snapping, common on mobile interfaces and featured content sections.
Cards almost always appear in groups, which means you need a layout system to arrange them.
Hover Effects That Add Polish Without Overdoing It
Card hover effects serve two purposes: they signal interactivity (this card is clickable) and they add visual polish. The key is restraint. Too many simultaneous effects look distracting.
Shadow lift is the most popular and most effective card hover effect. The card appears to rise toward the user:
`css
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
transform: translateY(-4px);
}
`
Border color change is subtler but effective for card grids where shadows would be too heavy:
`css
.card {
border: 1px solid #e5e7eb;
transition: border-color 0.2s ease;
}
.card:hover {
border-color: #2563eb;
}
`
Image zoom draws attention to the card's visual content:
`css
.card-image {
overflow: hidden;
}
.card-image img { transition: transform 0.3s ease; }
.card:hover .card-image img {
transform: scale(1.05);
}
`
Use the Border Radius Tool to match the image border radius with the card container, preventing sharp image corners from poking through rounded card corners.
Pick one hover effect and use it consistently. Shadow lift for clickable cards, border color for selectable cards, image zoom for visual galleries.
Equal-Height Cards: Solving the Classic Problem
When cards in a row have different amounts of content, they end up at different heights. This creates a ragged grid that looks unfinished.
CSS Grid solves this automatically because grid items stretch to fill their row by default. Every card in the same row will be the same height.
But within the card, you still need the action area (buttons) pinned to the bottom. Without this, a card with a short description has its button right after the text, while a card with a long description has its button lower. The buttons are not horizontally aligned.
The fix uses Flexbox on the card itself:
`css
.card {
display: flex;
flex-direction: column;
}
.card-content { flex: 1; }
.card-actions {
margin-top: auto;
}
`
flex: 1 on the content area makes it expand to fill available space. margin-top: auto on the actions pushes them to the bottom. Every card in the row now has its buttons aligned at the same vertical position, regardless of content length.
This pattern is so common that it should be your default card structure. Even if your current cards all have similar content length, the layout should handle variable content gracefully.
Dark Mode Cards
Dark mode requires rethinking card elevation because shadows on dark backgrounds are nearly invisible. Instead of shadows, dark mode cards typically use surface colors and subtle borders.
`css
.card {
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark) {
.card {
background: #1f2937;
box-shadow: none;
border: 1px solid #374151;
}
}
`
The Material Design approach uses surface elevation through lighter background colors rather than shadows. A card at elevation 1 might be #1e1e1e, while a card at elevation 2 is #252525. The lighter the surface, the higher it appears.
For hover effects in dark mode, a subtle background color shift works better than shadow changes:
`css
@media (prefers-color-scheme: dark) {
.card:hover {
background: #2a3441;
border-color: #4b5563;
}
}
`
Text contrast is critical in dark mode. Body text should be rgba(255,255,255,0.87) (not pure white, which is too harsh). Secondary text should be rgba(255,255,255,0.6). These opacity levels match Material Design's recommended dark theme text colors.
Always test cards in both light and dark modes before deploying. What looks polished in light mode can look flat or invisible in dark mode if you only test in one context.
Performance Considerations for Card-Heavy Pages
Pages with many cards (product listings with 50+ items, dashboards with dozens of widgets) can have performance issues if not built carefully.
Lazy load images. Cards below the fold do not need their images loaded immediately. Use loading="lazy" on card images:
`html
`
Avoid excessive shadows. Each box-shadow triggers compositing on the GPU. A page with 100 cards, each with multiple shadows, can cause janky scrolling on mobile devices. Use a single, simple shadow per card.
Virtualize long lists. If your page shows hundreds of cards (infinite scroll product listings), render only the cards visible in the viewport. Libraries like react-window and @tanstack/virtual handle this efficiently.
Use CSS containment. The contain property tells the browser that a card's content is isolated from the rest of the page, enabling rendering optimizations:
`css
.card {
contain: content;
}
`
Optimize card transitions. Only animate transform and opacity for hover effects. Animating box-shadow directly triggers expensive repaints. Instead, use a pseudo-element for the hover shadow and transition its opacity:
`css
.card::before {
content: '';
position: absolute;
inset: 0;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
opacity: 0;
transition: opacity 0.2s ease;
border-radius: inherit;
}
.card:hover::before {
opacity: 1;
}
`
This approach moves the shadow to a composited layer and only animates opacity, which is GPU-accelerated and much smoother.
Pages with many cards (product listings with 50+ items, dashboards with dozens of widgets) can have performance issues if not built carefully.
FAQ
What shadow values look modern in 2026?
The trend is toward softer, more diffused shadows rather than the heavy drop shadows of a few years ago. Start with box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) for resting state and increase to box-shadow: 0 10px 25px rgba(0,0,0,0.08) for hover. Multiple shadow layers (a tight shadow plus a diffused one) create the most realistic depth effect.
Should cards have borders or shadows?
It depends on the density of your layout. Sparse layouts (2-3 cards per row with generous spacing) look better with shadows because the elevation effect is visible. Dense layouts (many small cards, dashboard widgets) work better with thin borders because shadows at that density create visual noise. Some designs use both: a subtle border with a very light shadow.
How do I make cards accessible?
If the entire card is clickable, wrap it in an tag or use an with a click handler. Include a descriptive heading inside each card (h3 or h4, depending on page structure). Make sure the card's interactive state (hover, focus) is visible for keyboard users. Add alt text to card images. Avoid putting multiple unrelated links inside a single card.
What is the best card width for mobile?
Full-width (single column) cards work best on screens under 640px. The card should have 16px margin on each side, giving it a perceived width of 100% - 32px. Horizontally scrollable card carousels are an alternative but require scroll indicators so users know more cards exist.
CSS Layout Tools: Grid, Flexbox, Gradients and Shadows
A practical guide to CSS Grid, Flexbox, gradients, and box shadows. Learn when to use each layout technique and generate clean CSS code fast.
Edit Images in Your Browser: Resize, Compress, Convert
Handle common image tasks in your browser without installing software. Resize, compress, convert formats, and inspect EXIF metadata in seconds.
CSS Generators: Gradients, Flexbox, Grid and Shadows
Use CSS generators to create gradients, flexbox layouts, grid systems, and box shadows. Visual editors output ready-to-copy CSS for your project.