The Premium CSS & Design Toolkit — 25 Visual Generators
Live Site · 25 Tools · Features · Get Pro
FreeReign is a CSS toolkit with 25 visual generators — 10 free, 15 Pro. Every tool has visual controls, a live preview, and instant code output in CSS, SCSS, and Tailwind formats.
No accounts. No sign-ups. No ads. 100% client-side.
| # | Tool | Description |
|---|---|---|
| 1 | 🎨 Gradient Generator | Linear, radial, and conic gradients with multiple color stops |
| 2 | 🌑 Box Shadow | Multi-layer shadows with inset, blur, spread, and opacity |
| 3 | ⬜ Border Radius | Per-corner control with unit switching |
| 4 | 🎯 Color Palette | 6 harmony modes: analogous, complementary, triadic, and more |
| 5 | 💎 Glassmorphism | Frosted glass effects with backdrop blur and saturation |
| 6 | 📐 Flexbox Playground | Visual flexbox builder with all properties |
| 7 | 🔲 Grid Generator | CSS Grid layout builder with template controls |
| 8 | ✨ Animation Builder | Keyframe animations with 6 presets and live preview |
| 9 | 💬 Text Shadow | Multi-layer text effects with custom typography |
| 10 | 🧊 Neumorphism | Soft UI effects with flat/concave/convex/pressed states |
| # | Tool | Description |
|---|---|---|
| 11 | 🔄 Transform | 3D rotations, scale, translate, skew with perspective |
| 12 | 🔀 Transition | Visual transition builder with 11 easing presets |
| 13 | ✂️ Clip-Path | 16 shape presets with custom polygon support |
| 14 | 🔮 CSS Filter | 9-property filter chain builder with drop shadow |
| 15 | 🔤 Type Scale | Modular typography scales using 8 musical ratios |
| 16 | 🏷️ CSS Variables | Complete custom properties system with color scales |
| 17 | 📏 Breakpoint Tester | Responsive viewport testing with 9 device presets |
| 18 | 📐 Aspect Ratio | Responsive aspect-ratio calculator with 9 presets |
| 19 | 📜 Scroll Snap | Scroll snap container builder with snap type and align |
| 20 | 🖱️ Cursor Styles | All 35 CSS cursor values with live preview |
| 21 | 📦 Container Queries | Component-level responsive designs |
| 22 | ✨ Gradient Text | Animated gradient text effects with multi-color support |
| 23 | 📏 Fluid Typography | Responsive font sizes using CSS clamp() |
| 24 | 📜 Custom Scrollbar | Webkit scrollbar styling with visual controls |
| 25 | 📱 Media Query Builder | Visual @media query builder with modern syntax |
- 25 interactive tools — everything a frontend developer needs
- 3 output formats — CSS, SCSS, and Tailwind
- Dark & Light themes — toggle with one click
- Keyboard shortcuts —
/search,←→navigate,Ctrl+Sdownload - Download CSS — export files directly from the code panel
- Zero dependencies — pure vanilla JS, blazing fast
- 100% client-side — your data never leaves your browser
- Responsive — works on desktop, tablet, and mobile
- SEO optimized — each tool has its own indexed landing page
- Build: Vite
- Language: Vanilla JavaScript (ES Modules)
- Styling: Custom CSS with CSS Custom Properties
- Fonts: Inter + JetBrains Mono (Google Fonts)
- Hosting: Hetzner + Cloudflare
- Bundle: ~181KB JS + 29KB CSS (gzipped: ~43KB total)
# Clone
git clone https://github.com/ChunkyFluid/freereign.git
cd freereign
# Install
npm install
# Dev
npm run dev
# Build
npm run buildUnlock 15 Pro tools + premium features:
- All 15 Pro tools listed above
- Clean code output (no watermark comment)
- Export to CSS, SCSS, Tailwind & JSON
- Save & load tool configurations
- Lifetime updates & new tools
MIT © FreeReign
Built with ◆ by FreeReign