What does the shadow intensity slider actually change?

It steps through four preset box-shadow values, from none to a large, soft 40px-blur shadow. Rather than tuning blur radius and opacity separately, the slider picks a whole preset so the shadow always looks proportionate and consistent.

How does the hover lift effect work?

When enabled, a `.card:hover` rule moves the card up 4px with `transform: translateY(-4px)` and swaps in a larger box-shadow, both eased with the `transition` already set on `.card`. The lift and shadow change happen together because they share the same transition duration.

Why use transform: translateY instead of changing margin-top on hover?

`transform` is composited on the GPU and doesn't trigger layout recalculation, so the hover animation stays smooth even on a page with many cards. Animating margin or top instead would force the browser to reflow surrounding elements on every frame.

Can I put any content inside the card?

Yes — the generated `.card` class only controls the outer container's background, border, radius, padding, and shadow. Any HTML (images, buttons, lists) can go inside it and will inherit the card's padding and background automatically.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS CARD GENERATOR

Build a UI card with shadow and hover lift, then copy the CSS and matching HTML.

Card title

A short description that lives inside this card.

Corner radius: 10px

Padding: 20px

Shadow intensity: 2

Hover lift

Background

Text color

Border color

.card {
  background: #201d19;
  color: #f2e9dc;
  border: 1px solid #4a4238;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}

How to build a CSS card

1
Adjust the corner radius, padding, and shadow intensity on the live preview.
2
Pick the background, text, and border colors.
3
Toggle hover lift to add a translateY hover effect.
4
Copy the generated CSS and the matching HTML structure.

Questions

What does the shadow intensity slider actually change?: It steps through four preset box-shadow values, from none to a large, soft 40px-blur shadow. Rather than tuning blur radius and opacity separately, the slider picks a whole preset so the shadow always looks proportionate and consistent.
How does the hover lift effect work?: When enabled, a `.card:hover` rule moves the card up 4px with `transform: translateY(-4px)` and swaps in a larger box-shadow, both eased with the `transition` already set on `.card`. The lift and shadow change happen together because they share the same transition duration.
Why use transform: translateY instead of changing margin-top on hover?: `transform` is composited on the GPU and doesn't trigger layout recalculation, so the hover animation stays smooth even on a page with many cards. Animating margin or top instead would force the browser to reflow surrounding elements on every frame.
Can I put any content inside the card?: Yes — the generated `.card` class only controls the outer container's background, border, radius, padding, and shadow. Any HTML (images, buttons, lists) can go inside it and will inherit the card's padding and background automatically.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.