# Adding CSS shadows to your Collections and Containers

**URL:** <https://community.glideapps.com/t/adding-css-shadows-to-your-collections-and-containers/72606>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [April 15, 2024, 11:08pm UTC](https://community.glideapps.com/t/adding-css-shadows-to-your-collections-and-containers/72606 "2024-04-15T23:08:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 15, 2024, 11:08pm UTC](https://community.glideapps.com/t/adding-css-shadows-to-your-collections-and-containers/72606/1 "2024-04-15T23:08:37Z")

</div>

For adding some visual interest to your Glide Apps! The shadow on cards don’t look that good on mobile, both in vertical and horizontal, so I made it display on desktop only.

 ![Screenshot 2024-04-15 at 7.01.42 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4c26d16af9dbefd1e9183bb8eb306b90646da864.png)

Reference on adjusting the shadow to fit your needs:

> **[CSS box-shadow property](https://www.w3schools.com/cssref/css3_pr_box-shadow.php)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

```auto
/*---Add Shadow to Container (the StyledDiv7 could be different for you)--*/
.container-shadow div[class*="StyledDiv7"] {
box-shadow: 0px 11px 40px rgba(0, 0, 0, 0.27);
}

/*---Shadow on Card Collection---*/
@media (min-width: 600px) {
.card-shadow [data-testid="cc-card"] {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.27);
}
}

```