DEV Community

Cover image for I built 84 free CSS tools in one place — no login, no ads, just tools
Nico
Nico

Posted on

I built 84 free CSS tools in one place — no login, no ads, just tools

#css #webdev #tools #opensource

I built 84 free CSS tools in one place — no login, no ads, just tools

I got frustrated with CSS tool sites that load slowly, hide features behind a paywall, or require you to sign up just to copy a gradient. So I built ToolFlow — 84 free CSS generators, design utilities, and calculators, all in one place.

No account. No ads. No tracking (beyond basic analytics). Just tools.

What's in there

The tools are split into six categories:

Color — Color Picker, Palette Generator, Color Mixer, Tint & Shade Generator, Color Converter, Color Harmony Generator, Image Color Extractor

Accessibility — WCAG Contrast Checker, Accessible Color Finder, Color Blindness Simulator

CSS generators — Gradient, Box Shadow, Text Shadow, Glassmorphism, Neumorphism, Gradient Text, Button, Loader, Tooltip, Triangle, Animation, Gradient Border, Pattern, Transition, Clamp() Calculator, Card, Scrollbar, Clip-Path, SVG Wave, CSS Variables, and many more

Layout — CSS Grid, Flexbox, Aspect Ratio, CSS Spacing, CSS Position, CSS Units Converter, Media Query Builder

Typography — Font Scale, Letter Spacing, Text Decoration, Text Stroke, Neon Text, Typography Playground

Utility — JSON Formatter, Regex Tester, Base64 Encoder/Decoder, Meta Tag Previewer, CSS Specificity Calculator, Password Generator, Word Counter, Unit Converter, and more

A few tools I'm particularly happy with

CSS Clamp() Calculator

Fluid typography is something I always had to look up the formula for:

slope = (maxSize - minSize) / (maxVW - minVW)
intercept = minSize - slope * minVW
result: clamp(min, calc(Xvw + Ypx), max)
Enter fullscreen mode Exit fullscreen mode

The CSS Clamp() Calculator does this with a live visual chart showing how the value interpolates between your min/max viewports. You set min size, max size, min viewport, max viewport — and get the clamp() value instantly.

CSS Specificity Calculator

I built this one because I kept forgetting the (A, B, C) scoring rules. Paste any selector — #nav .item:hover span — and it gives you:

  • A colored breakdown of every token (IDs red, classes orange, elements blue)
  • The numeric score 1-2-1
  • A comparison mode where you can add multiple selectors and see which wins with a bar chart

Meta Tag Previewer

Fill in your title, description, image URL, and site name. See exactly how your page looks in Google search results, a Twitter card, and a Facebook link preview — side by side, live. Then copy the generated HTML.

The tech stack

Every tool is a single HTML file — no frameworks, no build step, no CDN JavaScript libraries. CSS and vanilla JS only.

The whole site is ~2.3MB total (84 HTML files). It loads fast because there's nothing to load except the HTML + one Google Fonts request.

Deployment is a single rsync command to a VPS.

Why I made it free

I'm not a big fan of the freemium model for tools this simple. CSS generators shouldn't be gated. The site stays free forever.

There's a Gumroad store with CSS preset packs — things like 30 glassmorphism presets or 50 gradient backgrounds — for people who want ready-made values without opening a generator. But the tools themselves will always be free.

Some tools I still want to add

  • CSS Grid visual inspector (paste real CSS, see the layout)
  • @keyframes timeline editor
  • CSS variable token export (Design Tokens JSON format)
  • Favicon generator

If there's something you'd find genuinely useful — drop a comment. I build these fast.

toolflow.app — 84 free tools, no account required.

Top comments (0)