I Built 8 Free CSS Tools So You Don't Have to Do the Math Anymore

Khalid Khan — Fri, 15 May 2026 06:46:29 +0000

Every frontend developer has been there.

You're in the middle of building a component, and you need a box shadow that looks just right. So you write box-shadow: 5px 5px 10px rgba(0,0,0,0.3) and it looks wrong. You tweak the numbers. Still wrong. You open a random generator site, it's covered in ads, asks you to sign up, and crashes on mobile.

That frustration is why I built CSS Toolkit — a free collection of 8 CSS tools that run entirely in your browser with no login, no ads, and no nonsense.

Here's what's in it and why each tool exists.

1. PX to REM Converter

The most common task no one wants to do manually.

If your root font size is 16px, then 24px becomes 1.5rem. Simple enough. But what about when you're migrating a legacy stylesheet with 200 pixel values? Doing that math one by one is a waste of time.

The PX to REM converter supports bulk input — paste a list of pixel values, set your base font size, and get all rem equivalents at once.

2. PX to EM Converter

Em works differently from rem. It's relative to the parent element's font size, not the root. That makes it context-sensitive and trickier to calculate.

The PX to EM converter lets you set the exact parent font size so the conversion reflects your actual component tree, not some generic default.

3. Box Shadow Generator

Writing box shadows by hand is one of CSS's most tedious tasks. You have five values to manage — horizontal offset, vertical offset, blur, spread, and color — and small changes can completely break the look.

The box shadow generator gives you sliders for all five values with live preview. You can stack multiple shadow layers and copy the final declaration straight into your stylesheet.

For comparison, shadows.brumm.af is another solid option if you want smooth layered shadows specifically. Both are worth bookmarking.

4. Border Radius Generator

Most developers know border-radius: 8px. Few use the full power of independent corner control and elliptical syntax.

The border radius generator lets you control each corner independently — top-left, top-right, bottom-right, bottom-left — with live visual feedback. It also supports the slash syntax for advanced elliptical shapes, which most generators skip.

5. Text Shadow Generator

Text shadows are underused because they're hard to visualize while writing. Too much blur makes text unreadable. Too little looks flat.

The text shadow generator supports multiple stacked layers, useful for glow effects and 3D text styles. You adjust offset, blur, color, and opacity visually and copy the output.

6. CSS Animation Generator

Writing @keyframes from scratch is fine for simple animations. For anything with multiple steps, custom easing, delays, and fill modes — it gets messy fast.

The CSS animation generator lets you configure duration, easing, delay, iteration count, and fill mode with a live preview. It outputs both the @keyframes block and the animation shorthand.

If you want a more extensive animation library with presets, animista.net is worth checking out too.

7. JWT Decoder

This one's a bit different from the CSS tools, but frontend developers deal with JWTs constantly — debugging auth issues, checking token expiry, inspecting claims.

The JWT decoder splits a token into header, payload, and signature and displays the decoded contents in a readable format. Everything runs client-side. Your token never leaves your browser.

8. Nth-Child Tester

:nth-child selectors are powerful but confusing. The an+b formula trips up developers at every level.

The nth-child tester lets you type any expression — a number, odd, even, or an an+b formula — and immediately see which items in a list would be selected. It's the fastest way to understand a pattern before writing it into a stylesheet.

Why I Built This

I got tired of opening five different tabs to do basic CSS tasks, each with a different UI, different output format, and different levels of trust around what they do with my data.

CSS Toolkit is my answer to that. Every tool runs in the browser. No server, no tracking, no account. Open it, use it, copy the output, close it.

Everything is free and always will be.

Try it: csstoolkit.net

If you find a bug or want to suggest a tool, the contact page is open. Always looking for what to build next.

DEV Community: Khalid Khan