Colors & UI Design Suite
OKLCH/HSL/HEX Converters, Mesh Gradients, Glassmorphism, Shadows & WCAG Contrast
HEX, RGB, HSL, OKLCH Converter & WCAG Contrast Checker
Convert between HEX, RGB, HSL, and modern OKLCH color spaces, and calculate WCAG 2.2 accessibility contrast ratios.
CSS Glassmorphism Generator
Create modern frosted glass UI components with backdrop-filter blur.
CSS Neumorphism & Soft UI Generator
Build extruded soft neumorphic buttons, cards, and inset shadows.
CSS Box Shadow & Layered Glow Studio
Generate ultra-smooth multi-layered box shadows and glowing borders.
Mesh & Multi-Stop CSS Gradient Studio
Design vibrant multi-stop linear, radial, and conic gradients.
OKLCH & HSL Color Palette Harmony Maker
Generate complementary, triadic, and analogous color palettes in OKLCH.
CSS Clip-Path Shape Maker
Create geometric clip-path polygons, triangles, circles, and stars.
CSS Border-Radius & Blob Morphism Generator
Create organic blob shapes using 8-value border-radius syntax.
Fluid Typography Clamp() Calculator
Calculate responsive font sizes using CSS clamp(min, preferred, max).
Aspect Ratio & Screen Dimension Calculator
Calculate 16:9, 4:3, 21:9 aspect ratios and scale dimensions.
Image to Base64 Data URI Converter
Convert small PNG, JPEG, and SVG images into inline Base64 data URIs.
SVG to Clean Data URI / CSS Background
Convert raw SVG code into URL-encoded CSS background-image strings.
CSS Animation & Keyframe Studio
Design smooth CSS keyframe animations with custom cubic-bezier easing.
Color Blindness Simulator (Protanopia, Deuteranopia)
Simulate how UI color palettes appear across all color vision deficiencies.
RGB to CMYK Print Color Converter
Convert digital screen RGB values into print-ready CMYK percentages.
HEX to Android / Flutter Color Code
Convert HEX colors to 0xFF format for Flutter and XML Android layouts.
Font Pairing & Visual Typography Previewer
Preview Google Font pairings (Headings + Body) with live text controls.
CSS Triangle & Arrow Generator
Generate pure CSS border triangles and tooltip arrow pointers.
Favicon Generator & App Icon Sizer
Resize images into standard 16x16, 32x32, 180x180, and 512x512 icons.
CSS Grid Layout Generator
Visually build CSS grid template columns, rows, and gap layouts.
CSS Flexbox Playground & Alignment Guide
Experiment with flex-direction, justify-content, and align-items.
Dark / Light Theme Color Contrast Matrix
Audit background and text contrast pairs across entire design systems.
SVG Gradient & Pattern Generator
Generate reusable SVG gradient defs and repeating vector patterns.
Golden Ratio & Fibonacci Scale Calculator
Calculate layout spacing and typography scales using the Golden Ratio.
Image Pixel Dimensions & DPI Calculator
Calculate print dimensions in inches and centimeters from DPI and pixels.
Tailwind CSS Utility to Vanilla CSS Transpiler
Transpile Tailwind CSS utility classes into clean, standard Vanilla CSS declarations.
Cubic Bézier CSS Animation Easing Generator
Generate cubic-bezier(x1, y1, x2, y2) timing functions with velocity curves, CSS transition rules, and SVG curve previews.
CSS Glassmorphism & Backdrop-Filter Generator
Generate cross-browser frosted glass effects using backdrop-filter blur, OKLCH translucent tints, and subtle borders.