Free Design Tools

Pick colors, check contrast, generate CSS, and optimize SVG assets in your browser.

Color Picker

Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.

Open tool

CC Design

Color Contrast Checker

Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.

Open tool

CG Design

CSS Gradient Generator

Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.

Open tool

SO Design

SVG Optimizer

Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.

Open tool

CB Design

CSS Box Shadow Generator

Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.

Open tool