Universal CSS Utility Class Generator

This micro-SaaS allows developers and designers to quickly generate a custom, lightweight CSS utility-first framework tailored to their project's needs. Users can visually define their spacing scales (e.g., pt-1 to pt-10), font sizes, color palettes, breakpoints for responsive design, and other common CSS properties. The tool then generates a single, optimized CSS file with all the utility classes (e.g., mt-4, text-lg, bg-primary, md:flex). Target audience includes web developers, front-end engineers, and UI designers seeking to accelerate development and maintain design consistency. The $1.99 payment unlocks unlimited generations, full CSS file downloads, and the ability to save and load custom presets, making it an invaluable asset for rapid prototyping and production. The first 3 generations are free for trial.

Spacing Scale

Prefix (e.g., 'p', 'm', 'pt', 'pb'):

Unit (e.g., 'rem', 'px', 'em'):

Base value (e.g., 0.25 for 0.25rem, 0.5rem, 0.75rem...):

Number of steps (e.g., 10 for 0.25 to 2.5):

Include auto (e.g., 'm-auto'):

Font Sizes

Color Palette

Text Color Prefix (e.g., 'text'):

Background Color Prefix (e.g., 'bg'):

Breakpoints

Prefix (e.g., 'sm', 'md', 'lg'):

Other Utilities

Generated CSS (for preview):

Free use limit reached. Unlock unlimited access.

You have used your 3 free generations. Subscribe for unlimited access and more features.

Showcase Hub Bundle

Unlimited access to this and 19+ other premium Pixel Office apps.

One-Time Access

Unlock this single app forever with a one-time payment.

Crypto Micro-Payment

Pay securely with cryptocurrencies (Solana / Bitcoin).