EspañolCSS card generator (services section)
Write the cards, one per line, and choose the style. The grid uses auto-fit, so the cards rearrange themselves from phone to desktop.
How to useService cards for your site
Available in: 
CSS card generator (services section): what it is for
Cards are the most common way to present services, benefits or products on a page. This generator builds the section with a title and the cards you write, each with an icon or image, title, text and link.
The grid uses repeat(auto-fit, minmax()), which rearranges the cards on its own from phone to desktop without media queries. Choose shadow, border or a colored background, the minimum width, a whole-card click area with a single accessible link and a lift-on-hover effect that only shows on devices with a mouse and respects people who prefer less motion.
How to use
- Write one card per line.
- Choose the style, color and minimum width.
- Copy the code and paste it into the page.
When to use it
- Services section for an auto shop or salon.
- Product benefits.
- A store's category list.
Frequently asked questions
How do the cards adapt to phones?
The grid uses grid-template-columns with repeat(auto-fit, minmax(...)): as many cards as the width allows, each with the minimum width you chose. On phones there is one per row, on tablets two and on desktop three or four, without media queries.
Can I make the whole card clickable?
Yes. Tick the option and enter the link in each card: the code uses the title as the link and extends the click area to the whole card with a pseudo-element, keeping the HTML accessible (a single link per card, with text).
Emoji or icon?
The cards accept a short symbol or an image. For a more professional look, use SVG icons from the same set (such as Lucide or Heroicons) by pasting the image URL into the card's field.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.