CSS Shadows Gradients

CSS Shadows

CSS allows you to create two types of shadows:

1. box-shadow — for elements

Adds shadow to boxes (divs, buttons, cards, etc.)

.box {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

• box-shadow: offset-x offset-y blur-radius color;
• offset-x → horizontal shadow (right/left)
• offset-y → vertical shadow (down/up)
• blur-radius → smoothness of the shadow
• color → shadow color

You can also add multiple shadows separated by commas.

2. text-shadow — for text

Adds shadow to text

h1 {
  text-shadow: 2px 2px 5px gray;
}

• text-shadow: offset-x offset-y blur-radius color;

CSS Gradients

Gradients allow you to blend two or more colors smoothly.

There are two main types:

1. linear-gradient

Color transition in a straight line.

• background: linear-gradient(to right, red, yellow);
• Diection: to right, to bottom, or in degrees (45deg)
• You can add more than 2 colors
• background: linear-gradient(to bottom, #ff0000, #ffff00, #00ff00);

2. radial-gradient

Color transition from the center outward.

• background: radial-gradient(circle, blue, lightblue);

Example: Button with shadow and gradient

button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  color: white;
  padding: 10px 20px;
  border: none;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  border-radius: 5px;
}