32 visual properties
From clip-path and border-radius to shadows, filters, transforms, typography, flexbox, grid and scroll snap, in ten categories.
CSS property playground · an Atelier studio
Specimen Lab
Put any visual CSS property under the microscope.
Specimen Lab is a hands-on playground for 32 visual CSS properties. Drag handles right on the stage, read how the browser really computes each value, and copy the exact declaration when it looks right.
- Free & open source
- Runs in your browser
- Exports plain CSS
Features
What you can do in Specimen Lab.
Hands-on gizmos
Drag polygon vertices, corner handles, angle dials, shadow offsets and Bézier points directly on the stage.
Mental models
Each property explains how the browser actually computes it, with the full syntax broken down piece by piece.
Gotchas & pro tips
Learn the traps, such as clip-path cutting off box-shadow, before they cost you an afternoon.
32 challenges
A small hands-on goal for every property turns exploring into learning, and your progress is tracked as you go.
Copy-ready code
Copy the exact declaration or a complete class, and search the directory to jump to any property.
How it works
Four steps to production CSS.
Pick a property
Browse ten categories or search the directory.
Drag & tune
Use on-stage handles, sliders and presets.
Understand it
Read the mental model, syntax and gotchas.
Copy the CSS
Grab the declaration or a full class.
The output
Exactly the declaration you see
What is on the stage is what you copy. Specimen Lab writes plain declarations you can paste into any stylesheet, component or design system.
Great for
- Learning CSS visually
- Prototyping effects
- Teaching & workshops
- Quick reference
.card {
clip-path: polygon(50% 5%, 95% 38%, 78% 92%, 22% 92%, 5% 38%);
border-radius: 24px 8px 24px 8px / 16px 32px 16px 32px;
box-shadow:
0 4px 6px -1px rgb(0 157 142 / 0.14),
0 12px 20px -4px rgb(0 157 142 / 0.16);
}Ready to try Specimen Lab?
It opens instantly in your browser. Nothing to install, nothing to sign up for.