Box-shadow generator
Stack shadows for realistic depth — Material 3, soft elevation, glow.
Tools → Generate → Box-shadow · 7-day free trial · Premium $9.99 / yr
box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;
Built for the things AI can’t fake
This tool runs free, right here. The extension adds three things a web widget can’t:
Playground
↗JS / TS scratchpad — sandboxed and instrumented.
Paste real code, hit Run. Console + network monitor + watch expressions all in one panel.
- ·Real ES modules · top-level await
- ·URL imports — esm.sh & friends
- ·Live fetch monitor (every call)
- ·Watch expressions in your scope
- ·10s sandbox timeout · zero CORS pain
HTTP client
↗Postman-style request runner.
Save collections, share variables, hit any API. Includes GraphQL with introspection, OpenAPI / cURL import.
- ·Bearer / Basic / API-key auth
- ·GraphQL · introspection
- ·OpenAPI 3.x · cURL import
- ·Copy as fetch / axios / Python
Realtime (WS + SSE)
↗Stream-protocol tester — what Postman doesn’t do well.
WebSocket + Server-Sent Events with custom auth headers, auto-reconnect, JSON pretty-print.
- ·wss:// + ws:// + subprotocols
- ·SSE via fetch — Authorization works
- ·Auto-reconnect with backoff
- ·Send composer · ⌘ + Enter
What it does
Realistic depth in CSS comes from layering several box-shadows, not one. The generator lets you stack shadows, edit each layer, toggle inset, and see the live preview.
Why use VibeGear's box-shadow generator
- ✓N stacked layers with X / Y / blur / spread / color / inset
- ✓Configurable backdrop + shape colors for accurate preview
- ✓5 presets — Material 3, Soft elevation, Glow, Inset hairline, Stacked depth
How to use it
- 1Tools → Generate → Box-shadow.
- 2Adjust layers, copy CSS.
Related tools
One install. Every tool above.
7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Everything runs locally.
Install & start trial →→