Free developer tools
Single-page utilities for cross-platform devs. No signup, no ads, no tracking — every tool runs in your browser. Built by otf-kit.
Dev utilities
- →
AI Coding Cost Calculator
Estimate what agentic coding costs per month — and how the bill scales as your codebase grows. All from your own numbers, no fabricated benchmarks.
- →
Base64 Encoder / Decoder
Encode and decode Base64 strings — standard or URL-safe. Live conversion, copy in one click, runs entirely in your browser.
- →
JWT Decoder
Decode JSON Web Tokens — header, payload, and signature with expiry status. Pasted tokens never leave your browser.
- →
Regex Tester
Test regular expressions live with flags, capture groups, and match highlighting. Includes presets for email, URL, IP, and more.
- →
Hash Generator
Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text. Native browser crypto — your input is never uploaded.
Design
- →
Color Converter
Convert HEX ↔ RGB ↔ HSL ↔ OKLCH with live preview, CSS variables, and the closest Tailwind class.
- →
CSS Gradient Generator
Build linear, radial, and conic gradients with multi-stop colors and live preview. Copy clean CSS in one click.
- →
Border Radius Preview
Drag corners independently, mix horizontal and vertical radii, copy the exact border-radius shorthand. The fastest way to dial in a card or pill shape.
- →
CSS Box Shadow Generator
Stack multiple shadows with offset, blur, spread, color, and inset. Live preview on a real card. Copy the CSS or the matching Tailwind utility.
- →
Cubic Bezier Editor
Drag the handles to design any easing curve. Animated preview, classic presets, and the cubic-bezier() value to copy straight into your CSS or Framer Motion config.
- →
CSS Clip-Path Generator
Drag polygon vertices to shape any element. Common shapes (triangle, hexagon, arrow, parallelogram) plus custom polygons up to 12 points.
- →
Color Palette Generator
Generate complementary, triadic, analogous, and monochrome palettes from any base color. Includes accessible contrast scoring against white and black.
Design tokens
- →
Tailwind → Tamagui
Paste a Tailwind classList, get the equivalent Tamagui prop syntax. The fastest way to port web components to React Native.
- →
Design Token Migrator
Convert design tokens between CSS variables, Tailwind config, Tamagui tokens, and Style Dictionary JSON. The fastest way to port a design system.