Design Tools
Theme builders and design asset generators
15 free tools — no ads, no sign-up, everything runs in your browser.
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
CSS Spring Physics Generator
Generate natural CSS spring animations from stiffness, damping, mass, and velocity. Analytical damped-harmonic solution with settle-time estimation and cubic-bezier approximation.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles
Flexbox Playground
Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.
Mesh Gradient Generator
Create fluid color transitions and noise-textured backgrounds
OG Image Generator
Create Open Graph images for social media sharing. Design cards with custom text, colors, and gradients.
Pixel Art Sprite Studio
Draw retro pixel art on an 8x8 to 64x64 grid with pencil, flood-fill, ordered-dither and symmetry tools, curated PICO-8/Game Boy/NES/C64/Endesga-32 palettes, multi-layer compositing, and a frame timeline with onion skinning. Export static PNG, animated PNG, GIF, a sprite-sheet atlas (Pixi/Phaser/Godot/Unity JSON), or a CSS steps() animation snippet.
Px to Rem
Convert Pixels to REM units and vice versa (16px default).
shadcn/ui Theme Generator
Generate custom shadcn/ui themes with CSS variables for light and dark mode. Copy-paste into your globals.css.
Tailwind Theme Builder
Build custom Tailwind CSS themes with color palettes and generate tailwind.config.ts output
Typography Anatomy & Variable Font Lab
Load a TTF/OTF/WOFF/WOFF2 font and inspect glyph Bézier outlines, baseline/x-height/cap-height guides, kerning pairs, OpenType features and live variable-font axis sliders — export CSS @font-face, font-variation-settings and fallback metric overrides.