.element {
box-shadow: 0px 8px 24px -4px rgba(11, 18, 32, 0.18);
background: linear-gradient(135deg, #7a93ac 0%, #afb3f7 100%);
border-radius: 24px;
}Dial in a box shadow, gradient, border radius, transform or filter against a live preview, then copy the finished rule. The preview combines every panel, so you can build a complete surface treatment in one pass.
Box shadows, gradients and transforms are properties where the syntax is easy to write and hard to predict: the difference between a shadow that looks like depth and one that looks like a smudge is a few pixels of blur and a change of alpha, and no amount of reading the specification substitutes for seeing it.
Every control here updates a live preview and emits the exact declaration, so the value you settle on is the value you paste. Multiple shadow layers, colour stops at arbitrary positions and the full transform list are all covered, and the output is plain CSS with no framework or preprocessor assumed.
A convincing shadow is a physical claim rather than a decoration: it says how far the element sits above the surface and where the light is. The parts that make it read correctly are a vertical offset with little or no horizontal one, a blur radius larger than that offset, and a colour that is a transparent black rather than grey — grey sits on top of whatever is behind it while transparency lets the underlying colour show through, which is what a real shadow does. Stacking two or three layers, a tight dark one for contact and a wide faint one for ambient light, is what separates a shadow that looks like depth from one that looks like a smudge.
Gradients have their own well-known artefact. A blend between two saturated colours passes through a desaturated middle, so blue to yellow travels through a muddy grey-green that neither endpoint predicts. Interpolation happens in sRGB by default, which is where the muddiness comes from; adding an intermediate stop near the middle to steer the path around it is the usual fix, and it is far easier to find by dragging a stop and watching than by reasoning about colour space.
Transforms are applied right to left, which is the source of results that look nothing like the intention. translate then rotate moves the element and then spins it in place; rotate then translate spins the coordinate system first, so the subsequent move travels along the rotated axis. The transform-origin compounds this, since rotation and scale both pivot around it. The output here is plain CSS with no framework or preprocessor assumed, so the declaration you settle on is the declaration you paste, in the order the browser will read it.
It is easier to reason about while dragging. The generated CSS converts it to a normal rgba() alpha, so the output is standard CSS you can hand-edit.
Yes — switch the preview to Text to see it. In your own CSS you will also need background-clip: text and a transparent text colour.
No. box-shadow, gradients, border-radius, transform and filter are all unprefixed in every browser in current use.