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.

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.

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.