Transparency, box-shadow and text-shadow.
✍️ 3 exercises + code challenge in this lessonopacity sets the transparency of an element from 0 (invisible) to 1 (solid). It affects the element and all of its children.
box-shadow adds a shadow around a box:
box-shadow: x-offset y-offset blur spread color;
You can add several shadows separated by commas, and inset draws the shadow inside the box.
Mastering CSS Opacity & Shadows helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
.card { width: 220px; padding: 20px; margin: 20px; border-radius: 12px; background: white; display: inline-block; }
.s1 { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.s2 { box-shadow: 0 20px 40px -10px rgba(37,99,235,.5); }
.s3 { box-shadow: inset 0 0 0 3px #14B8A6; }
img:hover { opacity: .5; transition: opacity .3s; }
</style>
<div class="card s1">Soft shadow</div>
<div class="card s2">Coloured shadow</div>
<div class="card s3">Inset shadow</div>
<br><img src="https://picsum.photos/id/1035/200/100" alt="Waterfall" width="200" height="100"> ← hover meCheck what you learned in “CSS Opacity & Shadows”.
Make the image half transparent.
img {
opacity: ;
}
Which property adds a shadow around a box?
Give the card a box-shadow (any shadow).
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services