Design tools

Color format converter

Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.

Color contrast checker

Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.

CSS gradient generator

Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.

CSS box shadow generator

Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.

Aspect ratio calculator

Simplify an image or video aspect ratio and calculate the matching width or height for a target size, with a visual preview.

CSS Grid layout generator

Build a grid visually with fixed or responsive columns, adjust gaps and alignment, and copy matching CSS and HTML.

CSS Flexbox layout generator

Explore flex direction, wrapping, spacing and alignment in a live layout, with ready-to-copy CSS and HTML.

Color palette generator

Create complementary, analogous, triadic or monochromatic palettes from a base color and export HEX values, CSS variables or JSON.

CSS border-radius generator

Adjust linked or independent corner radii, preview elliptical corners and export border-radius CSS.

CSS polygon clip-path generator

Shape a polygon with draggable or numeric control points and export its live clip-path preview as CSS.

CSS cubic-bezier easing editor

Edit two curve control points, test the transition and export a cubic-bezier easing function.

Fluid font-size clamp() generator

Create responsive font-size CSS from size and viewport limits, with px/rem output and a live size preview.

CSS image filter generator

Preview blur, brightness, color and opacity filters on a sample or local image, then export the filter CSS.

CSS 2D and 3D transform generator

Preview translation, rotation, scale, skew and transform origins, with optional perspective and 3D controls.

Paper sizes and print pixel calculator

Look up A, ISO B, C, Letter, Legal and Tabloid sizes, then calculate pixels, inches and points with orientation and bleed.

SVG optimizer and PNG converter

Clean and optimize SVG files, compare their size and appearance, then download SVG or export a PNG with custom dimensions and a transparent or solid background.