# Tell Glide how you use CSS

**URL:** <https://community.glideapps.com/t/tell-glide-how-you-use-css/27641>\
**Category:** General\
**Created:** [June 4, 2021, 4:09pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641 "2021-06-04T16:09:41Z")\
**Posts on this page:** 1\
**Showing post:** 21

<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:** [June 4, 2021, 6:14pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/21 "2021-06-04T18:14:32Z")

</div>

https://www.loom.com/embed/a8da39a25fdf4078baa9cbb44fc11771

## Summary

* * *

> **Full Mobile/Destop Background**
>
> ```auto
> <div class="background"></div>
> <pre><span><style>
> .background {
> position: fixed;
> margin-top:0;
> width: 100%;
> height:100%;
> top:0;
> right:0; 
> left: 0%;
> z-index:-100;
> filter: brightness(30%);
> background-image: url("https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/xmLP8vaObRbgV6VTggV0/pub/28Q2XMiX1jNfyFWbL0l0.jpg"); 
> background-size: cover;
> background-position: center center;
> }
> 
> ```

* * *

> **Modal/Pop-up (gradient stylish)**
>
> ```auto
> /* Blurry */
> <a style="top:180px;">
> <div style="
> position:fixed;
> top:0px;
> left:-5%;
> margin: 0%; 
> padding:100vh;
> background-color: rgb(0 0 0 / 70%); 
> backdrop-filter: blur(4px);">
> </style></div></a>
> 
> /* Box */
> <div style =" position: fixed;
> top: 250px; 
> width: 94%;
> max-width:680px;
> opacity: 1;
> margin-left: -5px;
> height:190px;
> background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
> border-radius: 10px;
> padding-top: 1%;
> padding-left: 7%;
> padding-right: 7%;
> box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
> text-align: center;
> z-index:0 !important;">
> <br><br>
> <h3><font color=#fff>Perfil Enviado</h3>
> <div style="white-space: break-spaces;"><font color=#fff>Seu perfil será analisado e em breve você poderá acessar nossa plataforma.<br><br> <b> Equipe LíderNegra
> <bg>
> <a style="position: fixed; 
> width:100%; 
> top: 0%; 
> right: 0%; 
> left:0%;
> z-index:-1; 
> opacity: .4;">
> <div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">
> 
> </style></span></pre>
> 
> ```

* * *

> **No Nav-bar Title**
>
> ```auto
> <pre><div><style>
> [data-test="glide-app-bar"] :nth-child(1) {
> backdrop-filter: blur(1px);
> background: transparent; 
> -webkit-backdrop-filter: blur(1px);
> }
> #app-root div[opacity='1'] {
> color: transparent; 
> }
> 
> ```

* * *

> **Stylish Header - Rounded Border**
>
> ```auto
> <a style="position: absolute; width:100%; top: 105px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
> <div style="background-color: #f5f5f5; padding-bottom: 90vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div></a> 
> 
> <a style="position: absolute; width:100%; top:-120px; right: 0%; z-index:-2; opacity: 1;">
> <div style="background-color: #101010; margin: 0%; padding-bottom:330px;">
> <pre><span><style>
> [data-test="glide-app-bar"] >* {
> backdrop-filter: blur(0px);
> background: transparent; 
> -webkit-backdrop-filter: blur(0px);
> }/*----- hide nav bar ------*/
> #app-root div[opacity='1'] {
> color: transparent; 
> }
> 
> ```

* * *

---

_[View the full topic](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641)._