Free online tools
Design & Color
Explore 12 Design & Color tools and finish common tasks quickly in your browser.
CSS Flexbox & Grid Layout Generator
Visually configure and preview CSS Flexbox and Grid grid layouts, view animations, and copy CSS code.
Color Palette Generator
Generate beautiful color schemes and export HEX/RGB values.
SVG Optimizer & Minifier
Clean and optimize SVG code locally with file size comparison and live preview.
CSS Gradient Generator
Design linear and radial gradients visually, explore curated presets and export CSS code.
Color Converter & Contrast Checker
Convert HEX/RGB/HSL/CMYK formats and check WCAG 2.1 accessibility color contrast ratio.
CSS Shadow & Glassmorphism Generator
Fine-tune CSS shadow and backdrop-filter glassmorphism effects, export CSS instantly.
Color Contrast & Accessibility Checker
Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.
Physics Sandbox & Gravity Simulator
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
Visual SVG Path Editor
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
Sleek Browser Mockup & Screenshot Beautifier
Upload your webpage screenshot, wrap it with a premium macOS browser frame, drop shadows, and beautiful gradient backdrops, and export high-res PNG.
CSS Neon & Glowing Text Generator
Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code.
Smart Image Color Picker with Pixel Loupe
Extract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation.
