Bootstrap carousel box-shadow doubling during slide transition I have a bootstrap carousel in which the bootstrap "row" for each slide has a box-shadow applied. When the slide is transitioning the second slide shadow appears and doubles on top of each other (making the shadow look darker). I've tried to figure out how to apply it to a parent container so it won't show on each slide thus doubling up but have had no luck. .row {
padding:70px !important;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15);
} <!DOCTYPE html>
<html lang="zxx"><head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
&l