Simple, fast, free online tools. No login, no signup, no nonsense.
Convert pixel values to rem units with custom base font size and bulk conversion support.
ConverterConvert pixel values to em units instantly for responsive and accessible CSS.
Visually create CSS box shadows with live preview and instant code output.
GeneratorGenerate CSS border radius with individual corner control and live preview.
GeneratorCreate CSS text shadow effects visually with adjustable offset, blur and color.
GeneratorGenerate CSS animations visually without writing keyframes manually.
Decode and inspect JWT tokens instantly. No data ever sent to server.
DeveloperTest and visualize CSS nth-child selectors interactively in real time.
No tools found. Try a different search.
CSS Toolkit is a free collection of online tools built for frontend developers and designers who write CSS every day. Every tool on this site runs entirely in your browser — no account, no server processing, no data collection. You open a tool, use it, copy the output, and get back to building.
The tools cover the most common repetitive tasks in CSS workflows: unit conversion, shadow and radius generation, animation building, and selector testing. Instead of doing mental math or writing values by trial and error, you get a visual interface with instant live output.
The PX to REM converter takes pixel values and converts them to rem units based on a configurable root font size. It supports single value conversion and bulk input — paste a list of px values and get all rem equivalents at once. Useful for migrating a legacy stylesheet from px to a rem-based design system.
The PX to EM converter calculates em values relative to a parent font size that you specify. Since em is context-dependent, this tool lets you set the exact parent font size so the conversion reflects your actual component tree rather than a generic default.
The box shadow generator gives you a visual interface to build CSS box shadows with sliders for horizontal offset, vertical offset, blur radius, spread radius, and color with opacity control. You can add multiple shadow layers and see the combined effect live. The output is a ready-to-copy CSS declaration.
The border radius generator lets you control each corner of an element independently — top-left, top-right, bottom-right, bottom-left — with live visual feedback. Supports both uniform and asymmetric radius values including the elliptical slash syntax for advanced shapes.
The text shadow generator produces CSS text-shadow values with visual controls for offset, blur, color, and opacity. Supports multiple stacked shadow layers for glow effects and 3D text styles.
The animation generator lets you create CSS keyframe animations by selecting preset effects or building custom ones. Configure duration, easing, delay, iteration count, and fill mode with a live preview. Outputs both the @keyframes block and the animation shorthand property.
The JWT decoder splits a JSON Web Token into its header, payload, and signature, then displays the decoded contents in a readable format. Everything runs client-side — the token never leaves your browser. Useful for debugging authentication issues without needing a separate tool or server.
The nth-child tester lets you type any CSS :nth-child expression — a number, odd, even, or an+b formula — and immediately see which items in a list would be selected. Helpful for understanding complex patterns before writing them into a stylesheet.
Every tool works immediately with no sign-up, login, or email address. Open it and use it.
All processing happens locally. No data is sent to any server — including your JWT tokens and CSS values.
Every generator outputs standard, minimal CSS that you can paste directly into your stylesheet without cleanup.
No heavy frameworks, no bloated scripts. Every tool loads instantly and runs without any delay.
All tools are usable on mobile and tablet — useful when you need to check a value away from your main machine.
There are no paid tiers, premium features, or usage limits. All tools are free to use without restriction.
Yes, all tools on CSS Toolkit are completely free. There are no paid plans, no usage limits, and no features locked behind a paywall.
No. Every tool works without signing up or logging in. Open any tool and start using it immediately.
Yes. All tools run entirely in your browser. Nothing you type or paste is sent to any server. This is especially important for the JWT decoder — your tokens stay on your machine.
rem (root em) is always relative to the font size of the root <html> element — it stays consistent no matter where in the DOM you use it. em is relative to the font size of the parent element, which makes it context-sensitive and can compound in nested structures. For most design systems, rem is the safer choice for font sizes and spacing.
All tools work in every modern browser — Chrome, Firefox, Safari, and Edge. No plugins or extensions are required.
Yes. CSS Toolkit is actively maintained and new tools are added based on common developer needs. Check back or visit the blog for updates.