generators
CSS Gradient
The ultimate CSS gradient generator with visual preview and code export.
#gradient#color#background
Built-in toolFree · No signup
CSS @font-face Generator
Upload your font files — woff2, woff, ttf, otf, or eot, in any combination — and get clean @font-face CSS plus a downloadable zip with your fonts ready to drop into your project. The generator auto-detects weight and style from each filename (Regular, Bold, Italic, etc.) and groups multiple formats of the same weight into one rule. Pick Basic for sensible defaults, Optimal for font-display and a preload hint, or Expert for full manual control.
Share:
Quick & opinionated — upload your fonts, get clean @font-face CSS with sensible defaults.
Drop font files here or click to browsewoff2, woff, ttf, otf, eot — any combination, multiple weights
How to use
01
Upload your fonts
Drag in or browse for your woff2/woff/ttf/otf/eot files — one weight, several weights, or full italic sets. Filenames are auto-detected.
02
Pick a mode
Basic ships fast with sane defaults. Optimal adds font-display and a fallback stack. Expert exposes unicode-range, font-stretch, and per-file overrides.
03
Review the CSS
Check the generated @font-face blocks and usage example update live as you upload files and change settings.
04
Download the zip
Get a zip with your fonts (cleanly renamed to match the CSS) plus a ready-to-use fonts.css — drop both straight into your project.
More CSS generator tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.