CSS shadows
Created By: chatGPT
CSS shadows are a great way to add depth and dimension to your web elements. There are two main properties used for shadows:
box-shadow for element shadows and text-shadow for text shadows. Let's explore both in detail.Box Shadow allows you to create shadows around an element's box. The property uses a combination of horizontal offset, vertical offset, blur radius, spread radius, and color.
/* Basic box shadow */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}Text Shadow is used to create shadows behind text. This property is useful for making text stand out and improving its visual appeal. It accepts horizontal offset, vertical offset, blur radius, and color.
/* Basic text shadow */
.text {
font-size: 36px;
color: #333;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}You can also combine multiple shadows by separating them with a comma. This allows for more complex shadow effects.
/* Multiple box shadows */
.box-multiple {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3),
4px 4px 10px rgba(0, 0, 0, 0.2);
}To create inset shadows, which appear as if they are cast within the element itself, use the
Effects can be customized further by adjusting the values for offset, blur, spread, and color. Experimenting with these properties will give you a unique touch to your UI elements.inset keyword./* Inset box shadow */
.box-inset {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}