Card Generator

How to use it

1. Set the card padding, border radius and transition time in pixels and milliseconds.
2. Pick the background and text color, then the border width and its color.
3. Choose a shadow level (none, small, medium or large) and a hover effect: none, lift up, or a stronger shadow.
4. Hover the preview card to see the hover state, then press Generate CSS and copy the stylesheet plus the HTML snippet.

Common use cases

• Product grids - align card padding and radius across a listing before writing the component.
• Pricing tables - test a raised shadow and lift effect for the highlighted plan.
• Documentation panels - build note and warning cards that match the page tokens.
• Teaching CSS - show how box-shadow and transform combine for a lift on hover.

Why it stays private

The generator is plain client-side JavaScript: controls update a live card and a CSS string. No styles are sent anywhere, and the tool works offline.

FAQ

Q: Does the lift effect move the layout? A: No. It uses transform: translateY, which does not trigger reflow, so neighboring cards stay in place while the hovered card rises.

Q: Can I get a sharp-edged card? A: Yes. Set border radius to 0 for a square card, or keep a small radius such as 4 px for a slightly softened look.

Q: Why does the shadow look different on my phone? A: Box-shadow renders as a blurred gradient, and low-DPI or dark-mode screens sample it differently. The generated values are plain CSS, so the difference comes from rendering, not the tool.

Q: Is the preview an image? A: No. The preview is a real card element with the generated CSS applied, so padding and text reflow behave exactly as they will on your page.