MASTORSCDN BACKGROUND DOCUMENTATION

Welcome to the MastorsCDN Background Utility Classes documentation. These classes allow you to easily apply background colors, variations, shadows, and hover effects to your HTML elements. Each class is designed to be intuitive and flexible, following a consistent naming convention. Explore the sections below to see previews, class names, and usage examples.

Preview Class Name Description HTML Declaration Copy
Basic Background Colors
Apply solid background colors to elements using simple, color-based class names.
Red
 .bg-Red Sets a solid red background color. 
<div class="bg-Red">Red</div>
Blue
 .bg-Blue Sets a solid blue background color. 
<div class="bg-Blue">Blue</div>
Background Color Variations
Use numbered suffixes (e.g., -300, -700) to apply lighter or darker shades of a base color. Numbers range from 100 (lightest) to 900 (darkest).
Light Red
 .bg-Red-300 A lighter shade of red, ideal for subtle backgrounds. 
<div class="bg-Red-300">Light Red</div>
Dark Red
 .bg-Red-700 A darker shade of red, great for emphasis or contrast. 
<div class="bg-Red-700">Dark Red</div>
Important Background Colors
Special classes with an "i" suffix (e.g., .bg-Greeni) denote important or highlighted states, often with bolder or more vivid tones.
Green (Important)
 .bg-Greeni A vivid green background to signify importance or success. 
<div class="bg-Greeni">Green (Important)</div>
Hover Background Colors
Add the "hov-" prefix to change the background color only when the user hovers over the element.
Hover Purple
 .bg-hov-Purple:hover Changes the background to purple on hover. Default state is unaffected. 
<div class="bg-hov-Purple">Hover Purple</div>
Background Shadows
Apply shadow effects to backgrounds using "shad-" or "shadow-" prefixes. Both are interchangeable.
Blue Shadow
 .bg-shad-Blue or .bg-shadow-Blue A blue background with a subtle shadow effect for depth. 
<div class="bg-shad-Blue">Blue Shadow</div>
Green Shadow
 .bg-shadow-Green A green background with a shadow effect. (Note: Preview label corrected from "Red" to "Green".) 
<div class="bg-shadow-Green">Green Shadow</div>
Hover Background Shadows
Combine "shad-hov-" or "shadow-hov-" prefixes to apply shadow effects only on hover.
Red Shadow on Hover
 .bg-shad-hov-Red:hover A red shadow effect appears when hovering over the element. 
<div class="bg-shad-hov-Red">Red Shadow on Hover</div>
Purple Shadow on Hover
 .bg-shadow-hov-Purple:hover A purple shadow effect activates on hover for interactive feedback. 
<div class="bg-shadow-hov-Purple">Purple Shadow on Hover</div>