Initializing Tool...
Generate harmonious modular type scales with live preview and CSS, Tailwind, or SCSS output.
The Typography Scale Generator creates mathematically harmonious type scales for design systems and websites. Choose a base font size and a named musical ratio (Major Third, Perfect Fourth, Golden Ratio, and more) to generate a full scale from 3xs to 6xl. The live preview renders sample text at each size using a Google Font of your choice, and you can export the scale as CSS custom properties, a Tailwind config object, or an SCSS map.
Set your base font size (default 16px) and choose a scale ratio from the dropdown. Adjust the number of steps above and below the base. Select a Google Font and click Apply to see the scale rendered live. Toggle between rem and px output, then switch export formats and copy the generated code.
Arbitrary font sizes create visual inconsistency and make design handoff harder. A modular scale based on a consistent ratio (like Perfect Fourth 1.333) ensures every text size feels proportionally related, makes the design feel more considered, and produces tokens that translate directly to code.
Color Format Converter
Convert colors between HEX, RGB, and HSL formats.
Color Contrast Checker
Check WCAG contrast ratios between text and background colors.
CSS Gradient Generator
Visually build linear and radial CSS background gradients.
CSS Box Shadow Generator
Design custom CSS box shadows with an interactive visualizer.