Skip to main content
lab.golamrabbani.org

Card Design Generator

Design a UI card with a live preview and copy the matching CSS class plus HTML markup.

Written by Golam Rabbani, Founder & Lead Engineer

Content

Style

Welcome aboard

Step 1 of 3

A quick tour of the basics so you can hit the ground running.

Get started

How to use this card design generator

  1. Edit the title, subtitle, body, and (optionally) button text and URL on the left.
  2. Pick colours for the background, text, border, and button on the right.
  3. Use the Radius, Padding, Shadow, and Max width sliders to tune the shape.
  4. Watch the live preview update as you change each setting.
  5. Click Export Code, then Copy CSS + HTML to paste the result into your site.

About this card design generator

A "card" is one of the most common UI building blocks — a contained block with a title, some supporting text, and usually a call to action. This designer lets you sketch one visually and exports the matching CSS class plus the HTML markup, so you can drop it straight into any project without writing the styles by hand.

The CSS uses semantic class names (`card`, `card__title`, `card__subtitle`, `card__body`, `card__button`) and only inline-safe properties — no JavaScript, no dependencies, no Tailwind required. The HTML escapes user input so titles or bodies with `<`, `>`, `&`, or `"` characters do not break the surrounding markup. The live preview on screen uses the exact same values, so what you see in the dashed-border box is what the exported HTML will render.

For example, leave the defaults — title "Welcome aboard", subtitle "Step 1 of 3", body "A quick tour of the basics so you can hit the ground running.", button "Get started", radius 12px, padding 20px, shadow 6, max-width 360px — click Export Code, and the output is a `.card { ... }` block followed by a five-line `<article class="card">...</article>`. Paste both into your stylesheet and template and the card renders identically to the preview.

FAQ

What HTML element is the card?
A semantic `<article>` with class `card`. Inside there are an `<h3>` title, two `<p>` paragraphs (subtitle and body), and an optional `<a>` styled as a button.
Can I leave the button off?
Yes — clear the "Button text" field and the exported HTML omits the button element entirely. The button URL field is only used when there is button text.
Are the colours and sizes accessible?
The defaults pair a dark grey on near-white, which passes WCAG AA for normal text. If you change the palette, check contrast in a tool like the WebAIM Contrast Checker — this generator does not enforce a minimum ratio.
Do I need any CSS framework?
No. The exported CSS is plain, with no Tailwind, no SCSS, no variables. Paste it into any stylesheet and the card works.
What about hover or focus states?
The exported CSS keeps things minimal — base styles only. Add your own `:hover`, `:focus-visible`, and active states on top once you have pasted the snippet.