Elevation

CSS utility classes for background colors offer a fast, consistent way to apply styles, reducing repetitive code. They speed up development and simplify maintenance by centralizing color updates, ensuring uniformity across the project.

1. Elevation 1

Apply the .elevation-1 background color class only when the container has no ancestor with an elevation background. This approach maintains a clear visual hierarchy by enhancing contrast between nested elevation containers.

2. Elevation 2

Apply the .elevation-2 background color class when the parent container's has a .elevation-1 background. This maintains a clear visual hierarchy by enhancing contrast between nested elevation containers.

3. Elevation 3

Apply the .elevation-3 background color class when the parent container's has a .elevation-2 background. This maintains a clear visual hierarchy by enhancing contrast between nested elevation containers.