CSS Tools & Visual Generators

A visual suite for modern web styling — design multi-layer box shadows, glassmorphism cards, fluid clamp typography, and flexbox layouts.

Shadow Layers (2)

Canvas:

Layer #1

Offset X: 0px

Offset Y: 10px

Blur: 25px

Spread: -5px

Layer #2

Offset X: 0px

Offset Y: 20px

Blur: 40px

Spread: -10px

Preview Canvas

Shadow PreviewLayered Box Shadow

CSS Code

box-shadow:
  0px 10px 25px -5px rgba(0, 0, 0, 0.25),
  0px 20px 40px -10px rgba(249, 115, 22, 0.15);

Tailwind CSS cheat sheet

Box shadows, radius, flexbox — the exact utilities behind this CSS playground.

Interactive Git graph & CLI sandbox

Master Git branching, rebases, merges, cherry-picks, detached HEAD, and stashes with a live reactive DAG graph and interactive terminal.

Typing test for developers

Practice everyday typing, code symbols, terminal commands, and long-form developer text. Tracks WPM, accuracy, streak, and consistency score.

Live markdown preview

Split-pane markdown editor with real-time preview. Perfect for writing README files, documentation, and blog posts with export to HTML.

Visual gradient generator

Build linear, radial, and conic CSS gradients visually. Add stops, adjust angles, and copy ready-to-use CSS or Tailwind classes.

Mermaid diagram editor & previewer

Interactive Mermaid diagram editor with live SVG rendering, theme selection, presets, zoom/pan canvas, and export to SVG, PNG, and .mmd.

Generate & Read QR Codes

Create custom QR codes for URLs, Wi-Fi, Contacts, and Text with color & logo options, or upload/scan QR codes to decode content instantly.