design

Image Color Extractor — Extract a clean, dominant color palette from any photograph or design file. Processed fully client-side using the Median-Cut qua...

Generate harmonious color palettes using color theory. Complementary, analogous, triadic, tetradic, monochromatic schemes. Lock, copy, and export.

Generate 10 shades (50-950) from any hex color, like Tailwind CSS. View swatches, click to copy hex, export as Tailwind config or CSS variables.

Mix two colors with configurable gradient steps. See the gradient preview and copy CSS linear-gradient code. Free online color blender.

Calculate aspect ratios, dimensions, and scaling for images and videos. Enter width, height, or ratio and get the missing values instantly.

Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.

Design frosted-glass CSS with live preview — blur, saturation, fill opacity, border and shadow. Copy backdrop-filter CSS. Runs in your browser.

Create CSS clip-path shapes visually — polygons, circles, insets and 20+ presets with draggable points. Live preview and copy-paste CSS, in your browser.

Design CSS text-shadow visually — stack multiple layers, pick neon, 3D, outline and retro presets, then copy the CSS. Live preview, runs in your browser.

Build soft-UI neumorphism CSS visually — base color, light direction, shape and shadow distance. Copy box-shadow CSS. Live preview in your browser.

Make CSS triangles with the border trick — choose direction, width, height and color, preview live, and copy the width/height/border CSS. Runs in browser.

Design a CSS button visually — padding, colors, gradients, border-radius, shadow and hover effects — with a live preview, then copy the CSS. In-browser.

Style custom scrollbars visually — width, track and thumb colours, hover and radius — with a live WebKit preview and Firefox fallback. Copy the CSS.

Simulate protanopia, deuteranopia, tritanopia, and achromatopsia color blindness on images. Upload a photo or use the built-in test pattern.

Design custom CSS checkboxes with tick, cross, fill, or minus styles. Control size, colors, border radius. Live preview and copy CSS.

Generate pure CSS background patterns — stripes, dots, grids, checkerboards, and more. Copy-ready CSS code, no images required.

Discover 20 curated Google Font pairings for headings and body text. Filter by style (modern, classic, playful, professional, minimal). Copy @import and CSS for each pair.

Design custom CSS toggle switches with iOS, material, flat, 3D, and neumorphic styles. Live preview, copy HTML + CSS. Customize colors, size, labels, and animation speed.

Generate beautiful CSS background patterns with pure CSS gradients — stripes, dots, checkerboard, waves, zigzag, and more. Live preview, copy CSS, free and instant.

Build CSS box-shadow with multiple layers. Tune offset, blur, spread, color, opacity and inset for each shadow. Live preview and copy-ready CSS.

Find beautiful Google Fonts pairings for your next project. Browse curated heading + body font combinations by style. Copy CSS import code.

Free online WCAG contrast checker. Check color contrast ratios for AA and AAA compliance. Test foreground and background colors instantly.

Free online color blindness simulator. Simulate 8 types of color vision deficiency on any color palette. Check accessibility of your designs.