Design Generators

Design easing curves visually and copy the cubic-bezier() value, with a live motion preview.

Build CSS flexbox layouts visually — direction, alignment, gap and wrapping — with a live preview and copy-ready CSS.

Build CSS box shadows visually — control offset, blur, spread, color, opacity and inset.

Build linear or radial gradients with multiple stops — copy ready CSS.

Generate text-based favicons in 6 standard sizes (16-256px) with custom colors.

Generate QR codes for URLs, text, Wi-Fi, email and phone — 100% in your browser.

Create the frosted-glass (glassmorphism) effect — blur, transparency, tint and border — with a live preview and copy-ready CSS.

Design CSS text-shadow visually — offset, blur and color — with a live preview and copy-ready CSS.

Build CSS grid layouts visually — columns, rows, gap and responsive auto-fit — with a live preview and copy-ready CSS.

Design CSS buttons visually — colors, padding, radius, font and shadow — with a live preview and copy-ready CSS.

Create CSS keyframe animations visually — fade, slide, bounce, spin, pulse, shake — with duration, timing and a live preview. Copy-ready CSS.

Create gradient text in CSS — pick colors, angle and size — with a live preview and copy-ready CSS.

Create the soft-UI (neumorphism) effect — dual light/dark shadows — with a live preview and copy-ready CSS.

Build CSS border-radius visually — link or unlink corners, see live preview.

Clip elements into shapes — triangle, hexagon, star, circle and more — and copy the CSS clip-path.

Scan / decode a QR code from an image or your camera — instantly, in your browser.