How this works
Switch between the five tabs on the left — Layout, Border & Shadow, Typography, Background, and Flexbox — and adjust whichever properties you need. Only the tab you're on is shown at once, but every change across all five tabs feeds into the same CSS rule on the right, so you can mix a rounded card with a gradient background and centered flex content without losing earlier changes.
Why one rule instead of a full stylesheet
Most of the time you don't need a generator to hand you boilerplate for a whole page. You need the exact shadow value, or the exact gradient angle, for one component you're already halfway through building. That's what this outputs — a single class, ready to paste into whatever stylesheet or component file you're already working in.
A note on box-shadow values
Shadow offset X and Y control direction: a positive Y pushes the shadow downward, a negative Y pushes it up and gives more of a "glow above" effect. Blur controls how soft the edge is — low blur reads as a hard-edged drop shadow, high blur reads as a diffuse glow. Opacity matters more than people expect; a shadow at full opacity almost always looks heavier than intended next to real content.
Common questions
Does this generate a full stylesheet or a single rule?
A single rule, for one element, under whatever class name you set. That's usually the more useful unit mid-project rather than a full page of boilerplate.
Does it include vendor prefixes?
No, and it doesn't need to — box-shadow, border-radius, flexbox, and gradients have all been supported unprefixed in every current major browser for years.
Can I use this for Tailwind or another utility framework?
The output is plain CSS, so it fits best in a regular stylesheet, CSS Modules, or a styled-components template. If you're on Tailwind, use this to land on the exact values you want, then translate them into the closest utility classes.