Design & CSS

Tools in the Design & CSS category.

Color Converter

Convert between HEX, RGB, and Unity Color. For UI and materials.

DesignUnity

px / rem Converter

Convert between px and rem. Adjustable base font size.

FrontendCSS

Color Contrast Checker

Check contrast ratio. WCAG compliance.

DesignAccessibility

CSS Gradient Generator

Generate linear-gradient and radial-gradient visually with live preview. Copy CSS instantly.

DesignCSS

CSS box-shadow Generator

Generate box-shadow with live preview.

DesignCSS

Lorem Ipsum Generator

Generate dummy text for design and layout. Paragraphs and sentences configurable.

DesignUtility

Fluid Typography Calculator

Generate clamp() values for viewport-responsive font sizes.

DesignCSS

Aspect Ratio Calculator

Calculate height from width and ratio. For YouTube, images.

DesignCSS

Golden Ratio Calculator

Split a value by the golden ratio (φ). For layout and design proportions.

Design

Silver Ratio Calculator

Split a value by the silver ratio (√2). For A4, Japanese design, and layout proportions.

Design

CSS Grid Generator

Generate grid-template from rows and columns.

DesignCSS

Glassmorphism CSS Generator

Generate frosted glass-style CSS. backdrop-filter included.

DesignCSS

Line-height Calculator

Convert design line spacing (px) to line-height multiplier.

DesignCSS

RGBA to HEX & HEX to RGBA Converter

Convert between RGBA and HEX. Alpha/transparency supported.

DesignCSS

Tailwind Color Search

Find closest Tailwind class from HEX. e.g. bg-blue-500.

DesignCSS

Image Color Picker (Eyedropper)

Click on an image to extract HEX/RGB/HSL color codes. Palette storage included.

DesignImage

Dummy Image Generator

Create dummy/placeholder images with custom size, color, and text. Download as PNG/JPEG.

DesignUtility

Bulk Image Resizer

Resize images by exact width and height or maintain aspect ratio. Supports bulk processing safely in your browser.

ImageDesignSNS

Color Name Search

HEX to color name. Name to HEX.

DesignColor

← Back to top | Home