# CSS to create overlapping profile images

**URL:** <https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783>\
**Category:** Community Resources\
**Created:** [April 20, 2021, 1:02am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783 "2021-04-20T01:02:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 20, 2021, 1:02am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/1 "2021-04-20T01:02:55Z")

</div>

I want to turn a horizontal list of tiles into an overlapping list of tiles like you see in most social media apps. If you can figure this out using CSS, I’d be happy to compensate your time.

### Turn this…

 ![Screen Shot 2021-04-19 at 8.58.37 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/5/452f553720fc9aa45cdae89ef7e9a5403e18864f.png)

### …into this (+2 not necessary):

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1fed6b699dda10e7f8753966dec085fcebfda39.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 20, 2021, 1:33am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/2 "2021-04-20T01:33:06Z")

</div>

Nevermind…figured it out 😁

![Screen Shot 2021-04-19 at 9.32.17 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/6945b133d056e440e68e4008fa567d0477157352.png)

```auto
<pre><span><style>
.tile-inner {
width: 80px;
}
.inner {
grid-template-columns: repeat(5, 40px) !important;
}

```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 20, 2021, 1:33am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/3 "2021-04-20T01:33:32Z")

</div>

Just gotta add the border now.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 20, 2021, 1:47am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/5 "2021-04-20T01:47:48Z")

</div>

Thanks for sharing, this is great!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 20, 2021, 1:51am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/6 "2021-04-20T01:51:53Z")

</div>

```auto
.tile-inner {
width: 87px;
}

.tile-image-area {
border: solid 5px white;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

.inner {
grid-template-columns: repeat(5, 55px) !important;
}

```

![Screen Shot 2021-04-19 at 9.57.49 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33ffbae43b812825c8edd67238134363cbc2c3fa.jpeg)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 20, 2021, 3:28am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/8 "2021-04-20T03:28:40Z")

</div>

> [@Robert\_Petitto](#):
>
> Nevermind…figured it out 😁

I hope you compensated yourself handsomely 😂

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [April 20, 2021, 6:48am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/9 "2021-04-20T06:48:53Z")

</div>

Great job. It looks really nice too!

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [April 20, 2021, 8:52am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/10 "2021-04-20T08:52:12Z")

</div>

Neat 😉

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [April 21, 2021, 11:00pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/11 "2021-04-21T23:00:20Z")

</div>

Oh wow, simply gorgeous!

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [April 21, 2021, 11:06pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/12 "2021-04-21T23:06:50Z")

</div>

A doubt arose, you said you were planning to update your app in glide template store, but once we cannot use any code inside of it, can we when it’s an update?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 21, 2021, 11:18pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/13 "2021-04-21T23:18:06Z")

</div>

Hm. Good pt. Glide doesn’t want templates with CSS because it’s confusing to new Glide users. Maybe if it’s well documented in your template instructions and it doesn’t impact the functionality or significantly alter the layout of the app…

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [April 21, 2021, 11:19pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/14 "2021-04-21T23:19:34Z")

</div>

> [@Lucas\_Pires](#):
>
> Oh wow, simply gorgeous!

Thanks! I should mention that we should use the horizontal, circular tile layout, 4 tiles wide to get the same effect.

---

<div class="post-metadata">

**Author:** ![Harsh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh/32/27855_2.png) [@Harsh](https://community.glideapps.com/u/Harsh)\
**Post date:** [June 30, 2021, 8:50am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/15 "2021-06-30T08:50:39Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> .inner {
> grid-template-columns: repeat(5, 40px) !important;
> }
> 
> ```

has something changed?  
The border works perfectly, but the overlapping is not working anymore.  
Can you please help?

---

<div class="post-metadata">

**Author:** ![Anna-1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/anna-1/32/19193_2.png) [@Anna-1](https://community.glideapps.com/u/Anna-1)\
**Post date:** [June 30, 2021, 4:45pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/16 "2021-06-30T16:45:32Z")

</div>

Hi, @Robert_Petitto ! 😊

When I saw this, I was very surprised to see how CSS can be used to create such a function.

At the same time, I thought…

I was wondering if it’s possible to make the white border a gradient like in the picture? If so, can you teach me how to do that? 😊

 ![IMG_5618](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/831273d825a53e1b7052d6e0f5fb9dcaa8586a35.jpeg)

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 30, 2021, 6:09pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/17 "2021-06-30T18:09:12Z")

</div>

Hola @Anna-1

```auto
<pre><span><style>
.tile-inner {
width: 80px;
}

.tile-image-area {
border: solid 5px red;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px red;
}

.inner {
grid-template-columns: repeat(5, 55px) !important;
}

```

have you tried changing the color from white to whatever color you need?

![Screen Shot 2021-06-30 at 1.08.29 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/830328827eba56fd6d06b8cf84deaedaa7b17a81.jpeg)

 ![Screen Shot 2021-06-30 at 1.11.32 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8a07fbea8d9f2fc296b9281e8683ea3b0cef23ac.jpeg)

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 30, 2021, 6:13pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/18 "2021-06-30T18:13:38Z")

</div>

Hola @Harsh  
I believe you need to set the orientation of your inline list, tile layout to Horizontal.

I may be wrong.

 ![Screen Shot 2021-06-30 at 1.11.32 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8a07fbea8d9f2fc296b9281e8683ea3b0cef23ac.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 30, 2021, 6:51pm UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/19 "2021-06-30T18:51:43Z")

</div>

Correct. Layout needs to be horizontal for it to work. You can set the border radius to whatever you’d like. You can even use the color ‘transparent’ so that way it works well with both light and dark theme.

---

<div class="post-metadata">

**Author:** ![Anna-1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/anna-1/32/19193_2.png) [@Anna-1](https://community.glideapps.com/u/Anna-1)\
**Post date:** [July 1, 2021, 8:40am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/20 "2021-07-01T08:40:02Z")

</div>

Thank you @SantiagoPerez @Robert_Petitto !

I was able to add some color too.

![スクリーンショット 2021-07-01 17.36.34](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e3acadbfa1dd532f2bdbad5b42a980fe3a1a905.png)

But I can’t get the gradient border like in the Instagram stories 😓  
Is there any way to make this border a gradient?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 1, 2021, 9:40am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/21 "2021-07-01T09:40:04Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f30f710f5a624ae767b31d7c3951d9d6ca1a719a.jpeg)

I don’t have the right hex codes for the border here, it seems like this code is old and I can’t derive it from the site itself but you can use some trial and errors to figure out all the colors.

```auto
<pre><span><style>

.tile-inner {
padding: 5px 0px;
}

.tile-image-area {
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

.tile-image-area:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -4px; 
    border-radius: inherit;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

```

---

<div class="post-metadata">

**Author:** ![Anna-1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/anna-1/32/19193_2.png) [@Anna-1](https://community.glideapps.com/u/Anna-1)\
**Post date:** [July 1, 2021, 9:47am UTC](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783/22 "2021-07-01T09:47:37Z")

</div>

Thank you @ThinhDinh 😊

That was so awesome, I’m so impressed 😂  
It’s exactly what I’ve been wanting. Thank you so much!!

[Next page](https://community.glideapps.com/t/css-to-create-overlapping-profile-images/25783.md?page=2)