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