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
Find the aspect ratio of any size and resize images while keeping the same proportions.
Calculate RatioColor Blindness Simulator
Preview how your design appears to people with protanopia, deuteranopia, tritanopia.
Use ToolCSS Animation Generator
Build CSS @keyframes animations from ready-made presets, tune duration, easing, delay, iteration, direction and fill mode, and copy production-ready CSS with a live preview.
Generate AnimationCSS Clip-Path Generator
Visually craft CSS clip-path shapes — polygon, circle, ellipse and inset — with editable anchor points, ready-made presets, a live preview, and copy-ready CSS.
Generate Clip-PathCSS Filter Generator
Visually compose CSS filters — blur, brightness, contrast, grayscale, saturate, sepia, invert, hue-rotate and opacity — on a live image preview, then copy clean CSS.
Generate FilterCSS Transform Generator
Compose CSS transforms — translate, scale, rotate and skew — with live sliders, a real-time preview, and clean copy-ready CSS that collapses equal scales automatically.
Generate TransformFont Pairing Tool
Find and preview beautiful Google Font combinations.
Pair FontsGlassmorphism Generator
Design frosted-glass UI cards with live backdrop-blur, transparency, saturation, border and shadow controls — copy ready-to-use CSS or Tailwind.
Generate Glass CSSMesh 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
18+ tools
Health & Fitness
12+ tools
Education Tools
8+ tools
Productivity Tools
16+ tools
AI Tools
14+ tools
India Tools
15+ tools