utils logo UTILS
Free online tools to generate, calculate,
convert, format, encode, and play.
 

Design Utils

Design utilities for typography, spacing, layout, and visual design. Font tools, spacing calculators, and design system helpers — all in your browser.

3D Model Viewer
free online 3D model viewer. Upload GLB, GLTF, or OBJ files and inspect them interactively with orbit controls, adjustable ligh...
3D Text Generator
free online 3D text generator. Type text and render it as an extruded 3D object with Three.js. Adjust depth, bevel, materials a...
Aspect Ratio
Scale image and video dimensions while maintaining proportions. Supports common presets like 16:9, 4:3, 1:1, 9:16.
Business Card Designer
business card designer. Lay out a card with your text fields, upload a logo, pick a template, and export a print-ready PDF.
Chat Screenshot Generator
Free online fake chat screenshot generator. Create WhatsApp and iMessage style conversation mockups, play them back with message animations, and download as PNG. Runs entirely in your browser.
Color Scheme
Upload an image to extract dominant colors, build palettes, and copy hex/RGB/HSL values. Works entirely in your browser.
CSS Animation
Free online CSS animation generator with visual timeline editor, easing curve previews, and copy-ready keyframe code.
CSS Border Radius
Adjust each corner independently with a live preview. Copy ready-to-use CSS code for rounded corners, circles, and custom shapes.
CSS Box Shadow
Add multiple shadows, adjust offset, blur, spread, and color with a live preview. Copy ready-to-use CSS code.
CSS Button
Customize colors, borders, padding, shadows, hover effects, and typography with a live preview. Copy ready-to-use CSS and HTML code.
CSS Flexbox
Visually configure flex containers with direction, wrapping, alignment, gap, and child item sizing. Preview live and copy ready-to-use CSS code.
CSS Grid
Visually design grid layouts with custom rows, columns, gaps, and areas. Preview live and copy ready-to-use CSS code.
CSS Transform
Free visual CSS transform editor. Combine rotate, scale, skew, translate, and perspective transforms with live preview. Copy production-ready CSS.
Flowchart Maker
flowchart maker. Draw flowcharts and process diagrams with connectable nodes, auto-routing arrows, and export as PNG or SVG.
Font Pairing
Discover harmonious font combinations for headings and body text.
Font Size
Choose a base size and ratio to create harmonious type hierarchies. Preview text at each scale step and copy ready-to-use CSS.
Glassmorphism
Create frosted glass CSS effects with adjustable blur, transparency, border, and background color. Live preview and copy ready-to-use CSS.
Gradient Creator
Create linear, radial, and conic gradients with a visual editor. Preview live, add color stops, adjust angles, and copy ready-to-use CSS code.
Placeholder Images
Create custom placeholder images with specific dimensions, colors, text, and formats. Download as PNG, JPEG, WebP, or SVG.
Screen Ruler
on-screen pixel ruler and protractor calibrated to your display DPI. Measure lengths in pixels, millimeters, centimeters or inches and measure angles right...
SVG to 3D Model
SVG to 3D model converter. Upload an SVG, extrude it into a 3D model with adjustable depth, bevels, and materials, then export as GLB or a screenshot.

Feedback

Help us improve this page by providing feedback, and include your name/email if you want us to reach back. Thank you in advance.


Share with