8 New Free Web Developer Tools for CSS, Color, and Code

DevBottle just hit twenty-five tools. This batch added eight at once, which is the biggest single drop we’ve done. JSON utilities, color tools, CSS visual editors, and one accessibility check most teams skip until it’s too late.

All of it runs in the browser. Your files, your palette, your API keys - none of it touches a server.

Two Tools Worth Leaving Open All Day

A lot of the work that slows you down isn’t writing code. It’s the stuff around it. Decoding a minified API response. Encoding a font to drop into a stylesheet. Digging through raw JSON to figure out why a key is missing. These two handle that.

The JSON Formatter and Validator does three things: formats messy JSON into something readable, minifies it back down for payloads, and tells you exactly what’s wrong when it won’t parse. Paste in a response, click Format, and you get a clean block with a key count, line count, and byte size at the bottom. The error messages come straight from the browser’s JSON parser, so they point to the exact position of the problem. It pairs well with the API Tester if you want to fire a request and immediately inspect what came back.

The Base64 Encoder and Decoder goes both directions. Drop in a file - SVG, font, image, whatever - and get the base64 string plus a ready-to-paste data URI. Toggle the data URI header off if you just need the raw string. On the decode side it figures out the content type automatically: text shows up in a textarea, images render as a preview, binary files get a download button. Worth knowing upfront: base64 adds about 33% to the original file size. Fine for small icons and inline fonts, not great for anything larger.

Color Work From Format Conversion to Accessibility

Three tools that cover the design-to-code handoff for color.

The Color Format Converter shows every format at once. Paste anything - hex, rgb(), hsl(), oklch() - and all the others appear with copy buttons. No format selector to switch between. OKLCH is worth understanding here: its lightness axis is perceptually uniform, so two colors at the same L value actually look equally bright. HSL doesn’t do that, which is why HSL-generated scales often feel uneven even when the numbers look right.

The Tint and Shade Generator builds an eleven-step color scale from any base color, using the same lightness stops Tailwind’s built-in palette uses. Click any swatch to copy its hex. Below that is a full grid with every step labeled. Name your variable and export as CSS custom properties, a Tailwind config object, or SCSS. The output is ready to paste.

The Color Blindness Simulator is the check most design teams skip and then wish they hadn’t. Add your palette colors and it shows how they look under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia. The simulations use SVG color matrix filters running locally, so nothing uploads anywhere. About 8% of men have some form of red-green color vision deficiency. Run your palette through this before it ships. From there it connects directly to the Color Contrast Checker.

CSS Visual Editors That Replace the Guesswork

Tweaking animation easing values and clip-path coordinates in a text editor is miserable. Change a number, save, reload, squint, repeat. These three let you drag handles instead.

The Cubic Bezier Editor gives you a curve canvas with draggable handles and eight presets. The interesting ones are the overshoot curves like ease-in-out-back, where control points go past the unit square. The canvas adds a shaded zone to keep those handles visible. Hit Play, watch the preview element animate with your curve, and copy the value when it feels right.

The CSS Clip Path Generator starts you with a pentagon and a canvas full of handles. Eight polygon presets, plus sliders for circle, ellipse, and inset. The preview shows your shape clipped out of a gradient against gray, so you can see what’s hidden and what’s visible at the same time. And yes, you can animate between two shapes - they just need the same number of polygon points.

The CSS Animation Keyframe Builder is the heaviest of the new tools. Set the animation parameters at the top, build keyframe stops in the right panel (each stop gets a percentage and whatever CSS properties you want), and the preview element on the left animates live. If you’ve already built a timing curve in the Cubic Bezier Editor, paste it straight into the easing field here. And if you want 60fps, stick to transform and opacity - those run off the main thread.

All 25 Tools, Free, No Account

Everything’s live at devbottle.com/tools. No account, no install.