Loading page
About this tool
Generate responsive typography CSS with live font previews, gradients, shadows, presets, copy, download, and local history.
The Font CSS Style Generator writes a complete CSS text rule — family, size, weight, style, transform, letter-spacing, line-height, alignment, colour, gradient fill and text-shadow — from sliders you adjust against a live preview. Turn responsive on and the font-size is emitted as a clamp() with your minimum in px, a fluid vw middle value derived from the base size, and your maximum in px, which is the modern way to scale headings without media queries. You get the rule as copyable CSS or a downloadable style.css, plus a Google Fonts @import line at the top of the output when the family needs one.
Open Font CSS Style Generator on AltFTool — it loads instantly in your browser.
Set 'Font Family', 'Weight', 'Font Size' and 'Letter Spacing' in the Controls panel and watch the live preview update.
Switch on 'Responsive clamp()' and set 'Mobile Min PX' and 'Desktop Max PX' so font-size is emitted as clamp(minimum, fluid vw, maximum).
Copy the rule from the 'Generated CSS' panel, or press Download to save it as style.css.
Responsive mode outputs font-size as clamp(min, fluid vw, max), so the heading scales continuously instead of jumping at breakpoints.
Enabling a gradient writes background-image, -webkit-background-clip: text, background-clip: text and color: transparent together, which is the combination that actually renders.
Copying or downloading saves the settings to a local history of six entries you can re-apply, and there is a 20-step undo while you experiment.
A single rule named .generated-font-style containing font-family, font-size, font-weight, font-style, text-transform, letter-spacing, line-height and text-align, plus either a colour or the four gradient properties, and a text-shadow line when shadow is enabled. Rename the selector to whatever your project uses.
As clamp(minimum px, fluid vw, maximum px), where the fluid middle is your base size divided by 16 and expressed in vw with a floor of 1vw — so a 48px base becomes 3.00vw. The text never renders below the minimum or above the maximum you set.
Eight families: Inter, Poppins, Roboto, Montserrat and Open Sans, which load their stylesheet from Google Fonts automatically, plus Arial, Georgia and Courier New, which use the copies already on the device. Each is written as a full stack with fallbacks in the output.
Yes — the colour mode switch converts the picked value to hex, rgb() or hsl() in the generated rule. Gradients are always written as a linear-gradient with your two hex stops and the angle you set in degrees.