What's the difference between Personal and Studio?

Personal ($39) is for one person — unlimited use on one active device at a time. Activate on a new device and the old one signs out. Studio ($199) is for teams and commercial client work — unlimited team members, early access to new tools, and a commercial license.

Do I need an account?

No. Use any tool free up to 5 times per day on compute-heavier tools, and unlimited on lightweight ones. No card, no account, no signup required.

Where are my files processed?

Right on your device. Files never upload to any server. Everything runs in your browser — you can verify in DevTools → Network.

What happens if I use my Personal license on a second device?

The new device activates and the old device signs out. Your license key stays the same — you just move it between devices as needed. No limit on how often you switch.

Does this work on my phone?

Yes. Every tool works on iPhone, Android, tablet, and desktop.

What if I want a refund?

30-day money-back guarantee on both tiers. No questions asked. Email sales@cipherforces.com.

Will you add more tools?

Yes. New tools ship regularly. Your license includes every tool we ever release — Studio members get early access.

DevFree

Box Shadow Generator

Design CSS box-shadows visually and copy ready-to-paste code.

PrivateWorks OfflineNo Account

100% Private Works Offline Instant

Shadow Layers

Layer 1

Edit Layer

Inset

X offset0px

Y offset4px

Blur6px

Spread-1px

Opacity10%

Color

Shape

BGShape

CSS

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Tailwind arbitrary value

shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)]

Presets

Built in

Deep dive

About Box Shadow Generator.

Design CSS Box-Shadows Visually — and Copy the Code

Stack as many shadow layers as you want, drag the offset / blur / spread sliders, pick a color and opacity, and watch the preview update live. The CSS and the Tailwind arbitrary-value form are both kept in sync — copy whichever your project uses.

Shadow Layer Stack

Real product UIs almost never use a single shadow. Tailwind's shadow-md is two layers; shadow-xl is two layers with different spreads; neumorphism is one bright shadow plus one dark shadow. The layer panel on the left lets you add, remove, reorder, hide, and tweak each layer independently — exactly the way the underlying CSS works.

Inset, Glow, and Neumorphic Looks

Toggle inset on any layer to draw the shadow inside the shape (carved-out look). Crank the blur with a tinted color for a glow. Stack a light shadow plus a dark shadow on a same-colored background and you get the neumorphic look. The built-in presets give you working starting points for all three.

Built-In + Custom Presets

Ship-with presets cover the Tailwind scale (sm / default / md / lg / xl / 2xl), plus a glow, an inset-soft, and a neumorphic. You can save your own to a cf_shadow_presets cookie so they're there on the next visit. Nothing is sent to a server.

Live Preview Across Shapes

Switch between a card, a pill button, and a circle to see how your shadow reads on different geometry. Set the background color and the shape's fill color independently — useful when checking how a shadow looks on a brand-colored hero, not just on a white card.

Privacy: Pure client-side. Nothing leaves your browser.

Three steps