16 tools

Design tools

Design helpers: color conversion with WCAG contrast, CSS gradient and box-shadow generators.

Search by name, task or keyword.

16 results

Design CSS box-shadows.

Design CSS border-radius visually.

Design CSS cubic-bezier easing curves.

Design frosted-glass CSS cards.

Compute size from a ratio, or ratio from size.

Build modular type scales and CSS.

Design multi-layer CSS text-shadow.

Tune blur, contrast, and more—copy CSS filter.

Sized SVG placeholder images.

Tune flex properties and copy the CSS.

Generate an initials avatar as a PNG data URL.

Build grid templates and named areas with a live preview.

Create @keyframes and animation CSS from GUI controls.

Edit polygon, circle, ellipse, or inset clip paths.

Generate a complete button style block.

Add background, shadow, and radius to a screenshot.