Quarterly report
A short summary sits here. Two or three lines is the usual amount of text a card can carry before it stops being a card and starts being a page.
12 March
Read more
Developer Tools
New Tool
Free Online CSS Card Generator with Hover Lift
Build a real card and hover it while you work. Padding, radius, background, border and shadow, with a hover lift, an optional image area with its own aspect ratio, title and body typography, and a footer row. The output is the whole rule set, including the hover state and every inner element.
Free Forever
Nothing Uploaded
Hover lift on a real card
Runs in your browser
Preview
Hover the card to see the hover state. The preview is real markup with the generated stylesheet applied, not a picture of a card.
CSS
Buy Us A Coffee
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
How to Build a Card with CSS
A few steps, and nothing is uploaded.
1
Set the box
Start with the class name, a maximum width, the padding and the radius. The inner gap is the space between the image area, the title, the body text and the footer, and it is written as a flex gap rather than a set of margins.
2
Give it a surface
Background colour, a border width and colour, then a shadow with a drop, a blur, a colour and an alpha. A shadow at full opacity almost never looks right on a card, so the alpha starts low.
3
Decide what hover does
The hover state can lift the card, deepen the shadow and change the border colour. Because the preview is real markup with a real stylesheet, you can hover it and judge whether the lift is too much.
4
Copy the whole set
The output holds the base rule, the hover rule and a rule for each inner element, with the HTML it expects written as a comment at the top. Paste both and the card looks the same as the preview.
What to Know About Card CSS
Including what the tool leaves for you to do.
The card is markup, not a single element. A card is a container plus an image area, a heading, some text and usually a footer row, so a stylesheet for one has to name all of those. This tool writes them as
.card, .card__media, .card__title, .card__body and .card__footer, and it puts the HTML it expects at the top of the output as a comment. Change the class name and every selector changes with it.
The image area uses aspect-ratio, not a fixed height. Giving the media box
aspect-ratio keeps the shape at every width, which is what stops a grid of cards from looking ragged. Put an <img> inside it with width: 100%, height: 100% and object-fit: cover, and the picture fills the shape without stretching. The preview uses a flat colour because this page loads nothing from the network.
A hover lift is decoration, so it must not carry meaning. Hover does not exist on a touch screen, and a tap can leave the hover style stuck until the next tap elsewhere. Use the lift to make a card feel responsive, never to reveal information such as a link or a price. If you want the rules guarded, wrap them in
@media (hover: hover), which this tool does not add for you.
This page styles one card and does not read CSS back. There is no grid or layout for a set of cards, no badge, no avatar row, no dark mode variant and no horizontal card shape, and it cannot parse an existing rule set into the controls. It also does not check the contrast of your title or body colour against the background, so run the result through a contrast check before you ship it.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
A real card
The preview is article markup with the generated stylesheet applied.
Hover that works
Lift, shadow and border change on the actual element, not a mock-up.
Every inner part
Image area, title, body and footer, each with its own controls.
Aspect ratio media
The image box keeps its shape at any card width.
Paste ready output
The full rule set with the expected HTML as a comment at the top.
Runs in your browser
Nothing is sent anywhere. The page works with the network off.
About the CSS Card Generator
A card is the most reused block in modern interface work and one of the fiddliest to write from scratch, because it is never one element. You need the container, the image area, the heading, the text and the footer row to agree with each other about spacing, and you need a hover state that feels light rather than bouncy. Most card generators hand you a box with a shadow and stop there.
This page applies the generated CSS to real card markup through a stylesheet in the document, so what you see is the rule set doing its job. The hover lift genuinely runs on pointer entry, the inner gap is a real flex gap, and the image area really does hold its aspect ratio as the card width changes. Nothing is drawn for effect and then thrown away.
The harder decision was the naming. Inner elements need selectors, and a generator that invents its own class names produces CSS you then have to rewrite. The output uses the plain BEM shape, one base class with double underscore children, and the class name is yours to set, so the selectors match whatever the rest of your project already calls things. The expected HTML sits at the top of the output as a comment so there is no guessing.
Frequently Asked Questions
Aspect ratios, hover on touch, images and clickable cards.
The page loads nothing from the network, so there is no placeholder photograph to show. The media box is filled with a flat colour instead, and the generated CSS includes the rule an image inside it needs, which is width and height at 100 per cent with object-fit set to cover. Drop your own image into that div and it will fill the shape.
Usually not. Wrapping everything in an anchor makes the screen reader announce the entire card as one very long link, and it blocks selecting the text. The common pattern is to link the heading properly and then stretch that anchor over the card with an absolutely positioned pseudo-element, which keeps the accessible name short while the whole surface stays clickable.
For a card in a grid, 16 by 9 or 3 by 2 reads as a photograph and wastes little height, and 1 by 1 suits avatars, products and anything square. The important part is that every card in the set uses the same ratio, because mixed ratios are what make a grid look untidy even when the widths line up perfectly.
No, because the lift is a transform. A transform moves the painted result without changing the space the element occupies, so nothing around the card reflows. Do not use a margin or a top offset for this: those do change layout, and in a grid of cards the effect is a visible nudge of everything nearby.
Not directly. The generated container is a vertical flex column, which is the usual card shape. For a horizontal one you would change flex-direction to row on the container, take the aspect ratio off the media box and give it a fixed width instead. The rest of the rule set still applies, so it is a small edit rather than a rewrite.