Tools

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.

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 ↔ HEX 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

Image Resize

Resize images. Width/height, aspect ratio. Bulk support.

ImageDesignSNS

Color Name Search

HEX to color name. Name to HEX.

DesignColor

← Back to top | Home