CSS: CSS Gradients & Shadows
Last updated: 2026-10-13
1. Gradients
Gradients create smooth transitions between colors. CSS provides two main gradient functions.
(1) linear-gradient
Creates a straight-line gradient:
▶ Example
▶ Try it Yourself(2) radial-gradient
Creates a circular/elliptical gradient:
▶ Example
▶ Try it Yourself2. Shadows
(1) box-shadow
Adds shadow effects to elements:
▶ Example
▶ Try it Yourself(2) text-shadow
Adds shadow to text:
▶ Example
▶ Try it Yourself❓ FAQ
Q Any tools for creating gradients?
A Recommended: cssgradient.io and webgradients.com — drag-and-drop gradient generators. Copy code directly. Studying others' gradient schemes builds intuition for angles and color stops.
Q Can box-shadow have multiple shadows?
A Yes, separate with commas:
box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08); creates a double-shadow effect. Shadows stack in declaration order — earlier ones on top.Q What's the difference between text-shadow and box-shadow?
A
text-shadow acts on text only, no spread parameter, no inset support. box-shadow acts on the entire element box, has spread, supports inset. Similar syntax but different capabilities.📖 Summary
- Gradients and shadows are two powerful tools for visual quality
linear-gradientis most common for buttons, backgrounds, overlaysbox-shadowadds depth; card hover shadows are the most common usetext-shadowdecorates text;drop-shadowfollows actual element contours- Combining both creates more polished, layered designs
📝 Exercises
- Create a gradient button — left-to-right color transition, direction changes on hover.
- Create a "floating card" — subtle shadow by default, deeper shadow + lift on hover.
- Use
repeating-linear-gradientto create a striped background pattern. - Add
text-shadowordrop-shadowglow effect to a PNG icon or text.
