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.

Design named grid-template-areas visually.

Build responsive @media rules with breakpoint presets.

Compare and rank the specificity of CSS selectors.

Preview heading and body font combinations live.

Edit HTML, CSS, and JS in tabs with an instant sandboxed live preview.

Generate fluid typography clamp() CSS from min/max viewport and size.

Design a professional HTML email signature and copy it into any mail client.

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.

Turn a hex color into SwiftUI, UIKit and asset catalog code.

Resize or crop video to 9:16, 1:1, 4:5 and other social presets.

Stamp text watermarks across every page of a PDF.