Page 4
Visual styling laboratory
Backgrounds, borders, radius, shadows, opacity, transforms, hover states and clipping.
S-01 … S-06 · Backgrounds
S-01 Solid
S-02 Linear gradient
S-03 Radial gradient
S-04 Multiple layers
S-05 Image, cover, bottom
S-06 Repeating pattern
S-07 … S-12 · Borders & radius
S-07 4px solid all sides
S-08 dashed / dotted / double / solid per side
S-09 Bottom border only
S-10 Different radius per corner
S-11 Pill radius
S-12 Outline + offset
S-13 … S-20 · Shadows, opacity, transforms, hover
S-13 Layered box-shadow
S-14 Inset shadow
S-15 Opacity 0.5
S-16 Skew + rotate
S-17 Hover: lift + colour
S-18 Hover: gradient shift
S-19 clip-path polygon
S-20 ::before decoration