UI/UX Toolkit

Beautify and indent messy HTML markup.

Beautify or minify CSS with safe string handling.

Design linear, radial, and conic gradients visually.

Layer multiple box-shadows with a live preview.

Visually build flexbox layouts and copy the CSS.

Design CSS grid layouts with live preview.

Fine-tune per-corner border radii visually.

Create frosted-glass UI effects with live preview.

Generate parametric SVG wave shapes for sections.

Generate a complete SEO and social meta tag block.

Build keyframe animations visually with a live preview.

Layer multiple text-shadows with a live preview.

Generate arrow and triangle shapes with borders or clip-path.

Design polygon clip-path shapes with a live preview.

Translate common Tailwind utility classes into plain CSS.

Build an editable HTML table and export HTML + CSS.

Convert between px, rem, em, %, pt, vw, and vh.

Searchable reference of common HTML character entities.

Tune blur, brightness, contrast, and more with a live preview.

Design custom scrollbars with live preview.

Simplify ratios and compute matching dimensions.

Build a custom property theme with a live preview.

Combine translate, rotate, scale, and skew with a live preview.

Create soft UI neumorphic shadows with a live preview.

Crop images by dragging a selection box, right in your browser.

Sample any pixel color from an uploaded image.

Add a custom text watermark to your images.

Extract the dominant colors from any image.

Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.

Check WCAG 2.1 contrast ratio between two colors.

Generate complementary, analogous, triadic and other palettes.

Generate a 50–950 tint and shade scale from one color.

Simulate how a palette looks with common color vision deficiencies.

Blend two colors with a ratio slider and preview CSS blend modes.

Extract and normalize colors from CSS gradients or lists.

Generate random colors and palettes with HSL constraints.