Gradients, shadows, and rounded corners can add hierarchy to a page, but they work best when they support the content rather than compete with it. CSS generators are useful for exploring values and copying a starting point.
Linear Gradients
A linear gradient blends colors along a direction. Its angle controls the direction, and color stops control where colors appear. Check text contrast over the entire gradient because a label readable at one end may disappear at the other.
Box Shadows
A box shadow can suggest that an element sits above the page. Its horizontal and vertical offsets, blur, spread, and color affect the result. Use a restrained shadow for repeated cards and check it against the background.
Border Radius
The CSS border-radius property rounds corners. Consistent radius values across related components help a design feel cohesive. Very large radii can change a shape substantially, especially on small controls.
Explore values with the Gradient Generator, Shadow Generator, and Border Radius Generator. Review the copied CSS in your layout, then adjust it for responsive sizes and contrast.