Card Generator
Design card components with padding, radius, border, gradient or solid background, shadow and an optional hover lift. Copy the CSS.
Card title
A flexible card you can drop anywhere in your UI.
Background
.card {
padding: 28px;
border-radius: 18px;
background: #12151d;
color: #e2e8f0;
border: 1px solid #232836;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.40);
transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 50px -12px rgba(0, 0, 0, 0.60);
}About the card generator
Cards are the workhorse of modern layouts. What makes one look considered is mostly restraint: generous internal padding, a radius that matches the rest of the interface, a hairline border, and a shadow soft enough that you notice depth rather than the shadow itself.
The hover lift here pairs a small upward movement with a stronger shadow, which is the standard way to signal that a card is clickable.
How to use it
- 1Set the padding. Twenty-four to thirty-two pixels suits most cards.
- 2Choose solid or gradient background and set the colours.
- 3Add a hairline border, then a soft shadow tinted toward your background.
- 4Turn on hover lift if the card is clickable.
- 5Copy the CSS.
Questions
How much padding should a card have?
Twenty-four pixels is a safe default, thirty-two for a more spacious feel. Less than sixteen and the content feels cramped against the edges.
Should every card have a shadow?
No. On a dark interface a hairline border often reads better than a shadow, since shadows are hard to see against dark surfaces. Use one or the other rather than both at full strength.
Should the whole card be clickable?
If it leads to one destination, yes, and add the hover lift so people can tell. If it contains several actions, do not, because nested clickable areas are confusing.