Design Tools — Free Online Utilities
Design tools on BoxTool are mostly generators for CSS you would otherwise write by trial and error, plus a set of colour utilities. The CSS Gradient Generator, Box Shadow Generator, CSS Grid Generator and CSS Flexbox Generator let you adjust a live preview and copy the resulting property; the CSS Clip Path Generator does the same for polygon, circle, ellipse and inset shapes with draggable handles. Specialised generators cover keyframe animations, filters, borders, loaders, glassmorphism, neumorphism and pure-CSS triangles. On the colour side, the Color Contrast Checker reports WCAG 2.1 contrast ratios with pass/fail results, the Color Blindness Simulator previews an image as people with different types of colour vision deficiency see it, and Color Palette from Image extracts dominant colours with k-means clustering and exports them to CSS, Tailwind, Figma or ASE. Typography helpers include the Font Pairing Tool, which previews curated Google Fonts pairings, and the Font Size Calculator for fluid clamp() values. SVG tools generate wave dividers, tileable patterns and sprites, or visualise a path's d attribute command by command. Front-end developers and designers use these for quick prototyping; because the previews render in your browser, images you load for palette extraction or simulation are never uploaded.
All 45 Design tools
Calculate, simplify, and scale aspect ratios
Build CSS box-shadow values visually with live preview — supports multiple layers.
Build CSS @keyframes animations visually with live preview, timing controls, and cubic-bezier easing editor.
Visually build CSS borders, outlines, and box-shadows with live preview and instant code output.
Visually generate CSS clip-path shapes — polygon, circle, ellipse, inset — with draggable handles, preset shapes, and live preview.
Build a complete CSS design token system with colors, typography, spacing, shadows, and export to CSS, SCSS, JS, or Tailwind.
Build CSS filter effects visually with live preview — blur, brightness, contrast, sepia, hue-rotate, and more.
Visually configure Flexbox properties and get the generated CSS instantly.
Generate CSS glassmorphism effects with live preview and code export
Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.
Visually build CSS Grid layouts by dragging items across cells and export the CSS.
Visually design CSS borders, shadows, and frames for images and copy the code.
Generate pure CSS loading spinners and animations with live preview.
Generate animated CSS neon glow text effects with live preview
Generate CSS neumorphism / soft UI box-shadow styles with live preview.
Generate pure CSS triangles and arrows with live preview using the border trick or clip-path.
Convert a CSS value between px, rem, em, %, vw, vh, pt, cm, mm, and in all at once.
Preview how your images look to people with different types of color blindness.
Check WCAG 2.1 contrast ratios for foreground/background color pairs and get pass/fail results instantly.
Mix two colors using RGB, RYB subtractive, HSL, or perceptual Lab blending modes with a live gradient preview.
Find the closest CSS named color for any hex or RGB value.
Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.
Advanced color picker with eyedropper, history, and 6 format outputs
Generate harmonious color palettes from a base color using complementary, analogous, triadic, and other harmony rules.
Convert color temperature in Kelvin to RGB and hex color values.
Interactive HSL color wheel with harmony suggestions and palette export.
Find the nearest Tailwind CSS color class for any color
Pick any color from your screen and instantly see it in HEX, RGB, HSL, and CMYK formats.
Browse curated Google Fonts pairings, preview heading and body text live, and copy ready-to-use CSS snippets.
Generate CSS clamp() fluid typography values for responsive font sizes.
Create stunning CSS mesh gradients with draggable control points.
Create stunning CSS gradient text effects with live preview
Browse and search all 140 named HTML/CSS colors with HEX and RGB values.
Interactive color picker with HSL, RGB, HEX, and HSV support
Calculate PPI, total megapixels, and pixel dimensions for any screen or print.
Render text in retro pixel/bitmap fonts and export as PNG or text art.
Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.
Generate CSS or SMIL animations for SVG elements
Browse 200+ categorised SVG icons, customise colour and size, and copy or download.
Paste an SVG path `d` attribute, render it live with a grid, and explore each parsed path command.
Generate tileable SVG patterns for backgrounds with live preview
Create decorative SVG wave dividers for websites with live preview and one-click download.
Convert SVG markup into a CSS background-image data URI — URL-encoded or base64.
Pick any color from your screen and get harmonies, accessibility, and conversions.
Live font preview with Google Fonts and side-by-side comparison