Design Tools
Essential design and CSS utilities for front-end developers and UI designers. Convert colors between HEX, RGB, and Tailwind palettes, generate CSS gradients, shadows, and glassmorphism effects, pick colors from images, create favicons, crop and resize images, and encode images to Base64 — all without uploading files to any server. These tools bridge the gap between design mockups and production CSS, helping you ship pixel-perfect interfaces faster.
22 free tools — all running privately in your browser
HEX to RGB Converter
Instantly convert HEX color codes to RGB format for CSS
RGB to HEX Converter
Instantly convert RGB color values back to HEX format
HEX to Tailwind Color
Find the closest standard Tailwind CSS color corresponding to a HEX value
PX to REM Converter
Calculate REM values from pixels based on your root font size
Image Color Picker
Extract exact colors and generate beautiful palettes from any image
Tailwind to CSS
Translate your Tailwind utility classes instantly back into raw CSS rules
CSS to Tailwind
Translate pure CSS rules into Tailwind utility classes
Border Radius Generator
Design custom rounded corners intuitively and copy the CSS or Tailwind instantly
Aspect Ratio Calculator
Calculate aspect ratios or find missing dimensions for responsive imagery
Base64 Image Encoder
Convert images to Base64 strings or decode Base64 back to pure images
Image Crop & Resize
Crop, resize, and export images entirely in your browser with no upload
CSS Flexbox Generator
Visually build flexbox layouts and copy the CSS or Tailwind instantly
CSS Grid Generator
Build CSS Grid layouts interactively with live preview and generated code
Color Palette Generator
Generate beautiful color palettes from any base color with multiple harmony modes
SVG Wave Generator
Create SVG wave patterns for backgrounds and section dividers
CSS Clip Path Generator
Create custom CSS clip-path shapes with presets and drag-to-edit points
Glassmorphism Generator
Design frosted glass effects with backdrop-filter blur and transparency
Animated Gradient Generator
Create smooth animated CSS gradient backgrounds with custom colors and speed
WCAG Contrast Checker
Check WCAG 2.1 contrast ratios with auto color improvement suggestions
Favicon Generator
Generate favicons from text or images in all standard sizes
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview
CSS Gradient Generator
Create linear and radial CSS gradients with a visual editor