CSS Style Workbench
Pick a button, card, badge or avatar template, then tune the background gradient, border, corner radius and layered shadows on that real element and copy one complete CSS rule.
CSS Style Workbench
Pick a button, card, badge or avatar template, then tune the background gradient, border, corner radius and layered shadows on that real element and copy one complete CSS rule.
How the style workbench works
One real element, four properties layered together
Single-property generators show a colored square. Here the preview is a button, card, badge or avatar with real text, so a 1px border, a 12px radius and a two-layer shadow are judged together the way they will look in your interface. Turn any panel off to drop that property from the output without losing its settings.
The output is a single ruleset
The CSS panel prints background, border, border-radius and box-shadow in that order inside one selector. Shadow layers are listed one per line; colors with opacity below 100% are written as rgba() so they paste correctly. Rename the .element selector to match your component.
FAQ
Common questions and answers about this topic.
Where did the gradient, box-shadow and border-radius generators go?
They are the four panels of this workbench. The old addresses still work and open the workbench with the matching panel expanded; nothing you could generate before is gone.
Why is the shadow color a hex value plus an opacity slider?
Designers usually think of a shadow as a base color at some strength. Keeping the two apart lets you reuse the same hex across layers and only vary opacity; the output combines them into rgba() for you.
Is anything sent to a server?
No. The preview and the CSS are computed in your browser; there is no account, no upload and no saved history.