Softonic

CSS Card Generator

Step 1 / 2

Card Title

This is a preview of your card.

Next

A card is the container behind product tiles, blog previews, profiles and dashboard widgets. This generator styles that container: choose the background and border colors, the corner radius, the inner padding and a soft drop shadow, then preview the result on the page. The preview shows placeholder content; replace it with your own heading, text and actions. The output is one ready-to-use CSS class.

How to style a card container

  1. 1

    Choose the colors

    Pick the background color and the border color of the card.

  2. 2

    Set the shape

    Choose the corner radius and the inner padding that fit your layout.

  3. 3

    Add the shadow

    Adjust the blur and the opacity of the soft drop shadow below the card.

  4. 4

    Preview and copy

    Check the live preview and copy the generated .card CSS into your stylesheet.

What the generated CSS contains

The tool outputs a single class named .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background is the color you picked
  • border is always 1 px solid in the color you picked
  • border-radius and padding are your chosen values in px
  • box-shadow uses a fixed 4 px downward offset with your blur and opacity values

The preview is a placeholder

The preview shows a heading and a paragraph so you can judge the proportions. The tool itself outputs no HTML: apply the class to your own container and add your title, text, image or action buttons inside. If the card will sit on a colored page background, check the border contrast there, not only on the preview.

Sane limits

Values below zero are clamped to zero, and the shadow opacity stays between 0 and 1. Very large padding or blur values can create unexpected results, so keep the controls within the ranges you would use in a real layout.

Combining with your own markup

A minimal example for your page:

<div class="card">
  <h3>Product name</h3>
  <p>Short description</p>
</div>

The container style does not constrain what goes inside: it only handles the background, border, spacing and shadow.

Frequently Asked Questions

No. It outputs only the .card CSS class. Build the markup yourself, for example a div or an article that wraps your heading, text and actions.

The generated border is always 1 px solid. Edit the border line in the CSS if you need a different width or style.

A fixed 4 px vertical offset keeps the shadow subtle and readable. You control its softness (blur) and its strength (opacity).

No. The preview text is only for display. The copied CSS contains no content, only the container styles.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.