Design.dev design.dev

CSS & Dev Tools

Free interactive tools for modern web development.
Generate, visualize, and copy‑paste production‑ready code.

Typography

Font sizing, text effects, and type tools

4 tools

Clamp() Generator

Generate fluid, accessible font-size with clamp().

Text Shadow Generator

Create stunning CSS text-shadow effects with multiple layers.

Metallic Effect Generator

Create stunning metallic text effects with CSS gradients.

PX to REM Converter

Convert pixel values to REM units with batch processing and scale presets.

Colors

Color tools, gradients, and contrast checking

3 tools

Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance.

Gradient Mixer

Create beautiful CSS gradients using linear and radial colors.

OKLCH Color Converter

Convert colors between HEX, RGB, HSL, HWB, OKLCH, and LAB.

Layout

Grid, flexbox, and positioning tools

4 tools

CSS Grid Area Mapper

Visually design CSS Grid layouts by dragging areas.

Subgrid Visualizer

Visualize CSS subgrid inheritance with an interactive grid editor.

Flexbox Playground

Learn and experiment with CSS Flexbox properties.

Z-Index Visualizer

Visualize stacking contexts in 3D. Debug z-index issues and layer order.

Effects

Shadows, filters, borders, and visual effects

11 tools

Box Shadow Generator

Create beautiful CSS box-shadow effects with multiple layers.

Hover Effect Generator

Create beautiful CSS hover effects with transforms, colors, and animations.

Clip-Path Shapes

Create custom CSS clip-path shapes like circles and polygons.

Neumorphism Generator

Create soft UI neumorphism effects for modern designs.

CSS Filter Effects

Create and combine CSS filter effects with visual controls.

Backdrop Filter

Create frosted glass and glassmorphism effects with CSS backdrop-filter.

Border-Radius Playground

Create beautiful CSS border-radius effects with individual corner controls.

CSS Tooltips Generator

Create beautiful CSS tooltips with customizable positions and styles.

Custom Cursor Generator

Create custom CSS cursors with image upload and positioning.

CSS Background Patterns

Generate pure CSS background patterns. Dots, grids, stripes, checkerboard.

CSS Transform Playground

Visualize 2D & 3D CSS transforms with rotate, scale, skew, and perspective.

Animation

Timing functions, loaders, and motion tools

3 tools

Cubic-Bezier Studio

Design custom CSS timing functions with a visual curve editor.

CSS Loaders

Create customizable CSS loading animations and spinners.

Canvas Confetti

Create customizable confetti animations with HTML5 Canvas.

Images

Image optimization, icons, and aspect ratios

3 tools

Image Optimizer

Optimize images client-side. Resize, compress, and convert images.

Icon Favicon Builder

Convert SVG icons to PNG favicons in multiple sizes.

Aspect-Ratio Calculator

Calculate aspect ratios and responsive dimensions.

Utilities

Calculators, converters, and developer helpers

4 tools

CSS Specificity Calculator

Calculate and compare CSS selector specificity values.

nth-child Selector Generator

Build :nth-child() selectors visually. Select every Nth, ranges, odd/even.

Feature Detection

Check browser support for modern CSS and JavaScript features.

Redirect Rules Generator

Generate 301/302 redirects for Apache .htaccess, Nginx, and Cloudflare.