Add CSS Text Shadow and Box Shadow Properties
Adds shadow to text.
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow: Horizontal offset of the shadow.
v-shadow: Vertical offset of the shadow.
blur-radius: Optional. The blur radius of the shadow.
color: Color of the shadow.
p {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-size: 24px;
}
Adds shadow to an element's box.
box-shadow: h-offset v-offset blur spread color inset;
.card {
box-shadow: 4px 3px 8px rgba(51, 51, 51, 0.3);
}
h-offset: Horizontal offset of the shadow.
v-offset: Vertical offset of the shadow.
blur: Optional. The blur radius of the shadow.
spread: Optional. The spread radius of the shadow.
color: Color of the shadow.
inset: Optional. Specifies if the shadow is inset (inside the element).
Adds an inset shadow to an element's box.
.inner-card-shadow {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
inset: Specifies if the shadow is inset (inside the element).
box-shadow: inset h-offset v-offset blur spread color;
We can use both "text-shadow" and "box-shadow" to create layered or complex shadow effects.
Experiment with different values for "offsets", "blur radius", and "color" to achieve the desired shadow effect.
Use "text-shadow" to add shadow to text for decorative purposes or to improve readability.
Use "box-shadow" to add shadow to elements such as "boxes", "buttons", "cards", or "containers" to create depth or visual separation.