Core Code
Core Code Modern Dev Handbook

Hover Shadow Effect

Shadows can change on hover for interactive UI.

Preview

Code

<style>
.card{
width:180px;
padding:20px;
background:white;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
transition:0.3s;
}

.card:hover{
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
</style>

<div class="card">Hover me</div>

More CSS Shadows Examples (8)

example Basic Box Shadow open example example Soft Shadow open example example Inset Shadow open example example Multiple Shadows open example example Text Shadow open example example Glow Effect open example example Outline Shadow open example example Card UI Shadow open example