Four properties, measured
The generators produce ordinary CSS; there is no runtime. Measured output for one set of inputs:
| Generator | Output |
|---|---|
| Gradient, 135°, violet to pale | linear-gradient(135deg, #6e56f8 0%, #f1eeff 100%) |
| Shadow, offset 4, blur 12, spread −2 | 0px 4px 12px -2px rgba(0,0,0,0.18) |
| Uniform radius 8 | 8px |
| Triangle, 24 × 12, pointing down | width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #6e56f8; |
The radius collapses to one value when all four corners match; that is the shortest equivalent form, not a simplification that loses information.
Gradients: angle and stops
A linear gradient's angle is measured clockwise from “to top”: 0deg points up, 90deg points right, 180deg points down. The stops are positions along that line, and the space between two stops is where the interpolation happens. Two stops with the same position create a hard edge; three stops let you hold a colour across a band. Because the gradient is drawn in the element's box, the same rule looks different on a wide button and a tall card — a 135deg gradient across a 300 × 40 button is a very different line from the same angle on a 300 × 300 panel.
Conic gradients take an angle as a starting point and sweep around the centre; radial gradients take a shape and a centre. The generator supports all three, and the syntax is the only difference in the output — the colour stops are the same grammar.
Box shadows: four lengths and a colour
A box-shadow is offset-x offset-y blur spread colour, optionally prefixed with
inset. The offset moves the shadow; the blur softens its edge; the spread grows or
shrinks the shape before blurring. A negative spread is how a shadow is kept from leaking out from
under a card. Multiple shadows are comma-separated layers, drawn first-to-last with the first on top,
which is how a subtle contact shadow and a broad ambient shadow are combined.
The shadow is drawn outside the element's border box unless it is inset, and it does not affect layout: a large shadow can overlap neighbours without making the element bigger. That is usually what you want for a card lift, and a reason to avoid shadows on elements that sit in a tight grid without checking the overlap.
Radii and the triangle trick
Border-radius accepts one to four values. With four, the order is top-left, top-right, bottom-right, bottom-left — clockwise from the top-left. Two values mean top-left/bottom-right and top-right/bottom-left; three mean top-left, top-right/bottom-left, bottom-right. The generator collapses equivalent forms, which is why four equal corners become one number.
The CSS triangle is not a special property; it is what happens when an element has zero width and
height and thick borders. The borders meet at 45° diagonals, so a coloured top border with transparent
left and right borders renders as a triangle pointing down. The “width” of the triangle is twice the
side border width, and its height is the coloured border's width. This is why the generated rule sets
width: 0; height: 0 first: any content box would fill the middle and turn the shape into a
trapezoid.
Where the rule goes
A generated rule is a declaration, not a stylesheet architecture. Put it in a class rather than an inline style so it can be overridden by a theme, and avoid repeating the same gradient or shadow as a literal in ten places: a token or a utility class changes in one place when the design changes. The generator is for finding the value; the codebase is where it should live once it is chosen.
For interactive elements, a generated focus ring must stay visible in both themes and meet the 3:1 non-text contrast threshold. A shadow can stand in for a border, but a focus indicator that is only a subtle colour change may disappear for a keyboard user; test it with the keyboard, not only with a mouse.
When to hand-edit
Generators are good at getting a value you can see; they cannot know the context. A shadow tuned on a white card may be invisible on a dark background, a gradient may band on a low-colour display, and a radius that looks right on a 200px card can distort a very wide one. Treat the output as a correct starting point, then check it in the real layout at the real size, in both themes, and with the content that will actually be inside it.