Color Tools

Generate a full Tailwind CSS shade scale (50–950) from a base color with copy-ready v3 config and v4 @theme exports.

Blend two or more HEX colors with adjustable weights using RGB or HSL mixing and copy the mixed result.

Design layered CSS box shadows with live preview and copy-ready CSS, inline styles, and Tailwind classes.

Create layered CSS text shadows with live typography preview and copy-ready CSS, inline styles, and Tailwind classes.

Design CSS border-radius values per corner with live preview and copy-ready CSS, inline styles, and Tailwind classes.

Create frosted glass UI styles with backdrop blur, translucent backgrounds, and copy-ready CSS and Tailwind classes.

Create soft neumorphic UI shadows for raised, pressed, and flat surfaces with copy-ready CSS and Tailwind classes.

Design CSS clip-path shapes with live preview and copy-ready CSS, inline styles, and Tailwind classes.

Design CSS buttons with colors, borders, shadows, and hover states. Copy ready-to-use CSS, HTML, and Tailwind classes.

Generate CSS triangles with the border trick or clip-path. Customize size, direction, and color with live preview.

Tune CSS filter effects like blur, brightness, contrast, and hue-rotate with live preview and copy-ready CSS.

Visually build CSS gradients with a stop rail, color harmony, mesh layers, and copy-ready CSS variables.