Pick typography, spacing, flex, borders, and colors — then get a single reusable CSS class with a live preview. Names are sanitized for valid selectors. Nothing leaves your browser; copy the rule into any stylesheet or component.
It collects common presentation choices — type, spacing, flex alignment, borders, shadow — and prints one class rule you can paste into a stylesheet or CSS module. The preview shows how the same declarations look on a sample element.
CSS class selectors must start with a letter, underscore, or hyphen (with limits), and should avoid spaces or special punctuation. This tool strips leading dots, replaces illegal characters with
hyphens, and prefixes c- if the first character would otherwise be invalid.
Frameworks like Tailwind compose many small utilities; here you build one named class that bundles several properties — closer to a BEM block or a component style. You can still split rules by hand after copying.
justify-content, align-items, and gap apply meaningfully when display is flex, inline-flex, grid, or
inline-grid. For plain block, those lines are still emitted if set — remove them in your editor if you want a minimal rule.
No. Generation and preview run entirely in your browser. Copying is handled locally by the Clipboard API when available.
Yes — underscores are allowed. Double underscores and hyphens are common in BEM; this tool keeps letters, numbers, underscores, and hyphens after sanitization.
No. Tailwind is a large utility framework with build-time processing. This page outputs plain CSS for one class — useful for quick prototypes or teaching, not a drop-in replacement for Tailwind.
Set border-style to something other than none and ensure border-width is not 0. Color alone does not draw a border without width and style.
Modern evergreen browsers rarely need prefixes for the properties here. If you target very old browsers, run your stylesheet through Autoprefixer or your bundler’s pipeline.
This tool emits literal values. You can replace colors or spacing with var(--token) after pasting into your design system files.
A single class rule has low specificity. If styles do not apply, check for more specific selectors, !important elsewhere, or inline styles. Use devtools to see which rule wins.
The sample sits inside this page’s fonts and base styles. Your site’s body font and resets may differ — treat the preview as approximate, not pixel-perfect.
No. Use it for exploration and snippets. Production teams should centralize tokens, documentation, and accessibility review for real components.