Design & CSS

Color converters, WCAG contrast checkers, CSS box-shadow, border-radius, and aspect ratio utilities.

Color Converter & WCAG Contrast Checker

Convert colors between HEX, RGB, HSL, and HSV formats, with built-in WCAG 2.2 contrast compliance verification.

converter

CSS Box Shadow Generator

Design smooth, layered CSS box shadows with live interactive preview and copyable CSS snippets.

generator

CSS Border Radius Generator

Visually create uniform and 8-point organic rounded corners with instant CSS `border-radius` output.

generator

Aspect Ratio Calculator

Calculate proportional width or height dimensions based on standard (16:9, 4:3, 1:1, 21:9) or custom aspect ratios.

math

PX to REM & REM to PX Converter

Convert CSS pixel values to responsive rem units and vice versa based on root font size.

converter

WCAG Color Contrast Ratio Checker & Accessibility Validator

Evaluate color contrast compliance against WCAG 2.1 Level AA and AAA standards for normal text, large text, and UI components.

analyzer

Social Media Image Sizes & Dimension Guide (2025/2026)

Look up and copy exact recommended image, banner, story, and video dimensions for all major social networks.

generator

CSS Typography Scale & Modular Font Ratio Generator

Generate harmonious modular typographic scales (Golden Ratio, Major Third, Perfect Fourth) in REM, EM, and Pixels.

typography

Color Palette Generator & Color Harmonies Creator

Generate complementary, analogous, triadic, tetradic, and monochromatic color palettes from any base HEX/RGB color.

color

Depth of Field (DoF) & Hyperfocal Distance Calculator

Calculate near focus limit, far focus limit, total depth of field, and hyperfocal distance for any lens and sensor size.

photography

Print Resolution (DPI / PPI) & Maximum Print Size Calculator

Calculate pixel dimensions, physical print dimensions, and viewing distance requirements for sharp 300 DPI prints.

CSS Glassmorphism Generator & Frosted Glass Designer

Design modern frosted glass UI elements with interactive backdrop-filter blur, opacity, border highlights, and copyable CSS.

css

CSS Neumorphism (Soft UI) Generator & Button Designer

Generate soft UI extrusion and inset shadows with customizable light angles, blur radii, and flat/pressed/concave shapes.

css

Color Blindness (Daltonism) Palette & UI Simulator

Simulate how your brand colors appear to users with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.

accessibility

Modular Typographic Scale & Font Size Ratio Calculator

Generate harmonious typography scales (Major Third, Golden Ratio, Perfect Fourth) in rem/px with CSS custom property variables.

typography

Letterbox & Pillarbox Matte Calculator

Compute black bar pixel padding (letterbox or pillarbox) when fitting videos to display screens.

design

Color Harmony & Contrast Palette Generator

Generate 5-color harmonious palettes (analogous, triadic, monochromatic) with WCAG 2.2 contrast ratings.

design

Interactive CSS Grid Layout Builder & Code Generator

Visually build responsive CSS Grid layouts and copy production-ready CSS code.

css-tools

Visual CSS Flexbox Container & Alignment Builder

Visually design CSS Flexbox alignments, directions, and wrapping behaviors.

css-tools

CSS Box Shadow Generator & Elevation Designer

Design soft, layered, and inset CSS box shadows with live interactive card preview.

css-tools

CSS Fluid clamp() Calculator & Typography Scaler

Calculate fluid typography and spacing formulas using CSS clamp().

css-tools

CSS Transition & Timing Function Generator

Build CSS transitions with interactive hover testing, timing curves, and cubic-bezier presets.

css-tools

CSS Keyframe Animation Generator & Motion Sandbox

Generate keyframe animations with pulse, bounce, rotate, float, and shake presets.

css-tools

SVG Optimizer, Minifier & Metadata Stripper

Minify SVG markup, strip editor bloat, and reduce vector file sizes client-side.

svg-tools

SVG to CSS Data URI & Background Image Converter

Convert SVG vector code into URL-encoded CSS data URIs and Base64 strings.

svg-tools

SVG Path & ViewBox Inspector & Geometry Analyzer

Inspect viewBox bounds, path commands, segment counts, and vector geometry in SVGs.

svg-tools

Color Palette Harmonizer & Harmony Generator

Generate complementary, analogous, triadic, and monochromatic color palettes from a base hex color.

color-tools

CSS Gradient Generator – Linear, Radial & Conic Visual Designer

Create smooth linear, radial, and conic CSS gradients with multi-color stops, live angle controls, and instant code export.

css

CSS Filter Generator & Visual Image Effects Editor

Visually adjust image brightness, contrast, blur, hue, saturation, and sepia with real-time CSS filter code generation.

css

CSS Clip-Path Shape Generator – Polygons, Stars & Geometrics

Create geometric polygons, stars, hexagons, and custom shape masks using CSS clip-path.

css

CSS Text Shadow Generator & 3D Typography Designer

Design multi-layer text shadows, neon glow effects, and 3D extruded typography with instant CSS export.

css

SVG Wave & Shape Divider Generator for Web Pages

Generate smooth organic SVG wave dividers and layered hero section transitions for modern websites.

svg

SVG Pattern Generator & Seamless Background Designer

Create seamless repeating SVG patterns (dots, grids, diagonal hatching, isometric) for modern CSS backgrounds.

svg

Modular Typography Scale Generator & Fluid Font Sizing

Calculate harmonious font size scales using classical musical ratios (Major Third, Golden Ratio, Perfect Fourth) with CSS custom properties.

typography

Design System Color Contrast Matrix & WCAG 2.2 Auditor

Generate a multi-color WCAG 2.2 AA and AAA contrast matrix testing all foreground and background palette combinations.

accessibility