Design & CSS Tools

Color, typography, spacing, and CSS generators.

• WCAG Contrast Checker

  Check foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.

• CSS Gradient Generator

  Build linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.

• Image Color Palette

  Extract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.

• Box Shadow Generator

  Compose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.

• Border Radius Generator

  Build CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.

• Type Scale Generator

  Generate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.

• PX ↔ REM Converter

  Convert between pixels and rems for any base font size (default 16px). Paste a list of values to convert all at once — useful for responsive CSS and design token work.

• Spacing Scale Generator

  Build a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.

• Aspect Ratio Calculator

  Calculate width or height to preserve any aspect ratio — 16:9 widescreen, 4:3, 1:1, or custom. Great for responsive images, video embeds, and UI layouts.