Interactive learning
Interactive tools
Hands-on explorers for CSS properties and regex. Sliders, live previews and copy-ready code output.
explorers5
- /tools/clip-path-explorerCSS
Clip-Path Explorer
Every clip-path function — circle, ellipse, inset, polygon — with a live polygon editor, shape gallery, animation demos, and text masking.
- circle()
- ellipse()
- inset()
- polygon()
- Gallery
- Animation
- /tools/border-explorerCSS
Border Explorer
Every border property — style, width, color, individual sides, border-radius shortcuts and elliptical values, outline, and border-image.
- border-style
- border-width
- border-radius
- outline
- border-image
- /tools/gradient-builderCSS
Gradient Builder
Build linear, radial, and conic gradients with editable stops, positions, presets, text masks, and copy-ready CSS output.
- Linear
- Radial
- Conic
- Stops
- Presets
- /tools/box-shadow-explorerCSS
Box Shadow / Glow Explorer
Design layered shadows, neon glows, inset wells, focus rings, and ambient card depth with copy-ready CSS.
- Layers
- Glow
- Inset
- Presets
- Tailwind
- /tools/regex-explorerRegex
Regex Explorer
Visual regex reference with a live tester, token decoder, pattern lab, flags, lookaheads, and a complete cheatsheet.
- Live Tester
- Token Reference
- Pattern Lab
- Flags
- Lookaheads