Design Tools
Free online design utilities — color pickers, gradient generators, font previewers, and more. No Figma needed.
All Design Tools (20)
Explore our collection of free design tools
Color Palette Generator
✦ FeaturedGenerate harmonious palettes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic.
Generate PaletteBorder Radius Generator
Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.
Generate Border RadiusBox Shadow Generator
Visually craft CSS box-shadow — offset, blur, spread, color, opacity, inset toggle, plus Material-style elevation presets.
Generate ShadowColor Palette Generator
Generate harmonious palettes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic.
Generate PaletteColor Picker
Pick colors and get instant HEX, RGB, and HSL values.
Pick ColorContrast Checker
WCAG 2.1 contrast ratio for any fg/bg pair — pass/fail for AA-normal (4.5), AA-large (3.0), AAA-normal (7.0), AAA-large (4.5).
Check ContrastCSS Gradient Generator
Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.
Generate GradientFavicon Generator
One source image → 7 PNG favicons (16/32/48/64/180/192/512) + ready-to-paste HTML link tags + manifest.json icons entry.
Generate FaviconsAspect Ratio Calculator
Calculate and convert image aspect ratios for any screen.
Calculate RatioColor Blindness Simulator
Preview how your design appears to people with protanopia, deuteranopia, tritanopia.
Use ToolCSS Animation Generator
Build CSS keyframe animations with timing curves and live preview. Copy-ready CSS.
Use ToolCSS Clip-Path Generator
Visually craft CSS clip-path with anchor points and shape presets. Live preview.
Use ToolCSS Filter Generator
Visually compose CSS filters — blur, brightness, contrast, saturate, hue-rotate.
Use ToolCSS Transform Generator
Compose CSS transforms — translate, rotate, scale, skew — with live 3D preview.
Use ToolFont Pairing Tool
Find and preview beautiful Google Font combinations.
Pair FontsGlassmorphism Generator
Generate frosted-glass UI cards with backdrop-blur, transparency, and border tuning.
Use ToolMesh Gradient Generator
Create modern multi-point mesh gradients with draggable color stops. SVG output.
Use ToolNeumorphism Generator
Generate neumorphic shadow combinations — dark and light side. Copy-ready CSS.
Use ToolSVG Optimizer
Minify and optimise SVG files without losing quality.
Optimise SVGTailwind Config Generator
Generate a tailwind.config.js with your custom colors, spacing, and font scales.
Use ToolType Scale Generator
Pick a modular scale ratio (1.125, 1.25, golden) — get a full type scale in rem/px.
Use ToolSuggest a Tool
Missing something? Let us know.
Related Categories
Explore more tools you might need
YouTube Tools
17+ tools
Image Tools
25+ tools
Calculators
24+ tools
Converters
21+ tools
PDF Tools
12+ tools
Text Tools
23+ tools
Developer Tools
29+ tools
SEO Tools
10+ tools
Data Tools
16+ tools
Social Media Tools
12+ tools
Email Tools
8+ tools
Security Tools
14+ tools
Date & Time Tools
18+ tools
URL & Link Tools
8+ tools
Finance Tools
14+ tools
Health & Fitness
12+ tools
Education Tools
8+ tools
Productivity Tools
16+ tools
AI Tools
11+ tools
India Tools
15+ tools