# Header Glass
**URL:** https://meta.discourse.org/t/header-glass/275367
**Category:** Theme component
**Created:** [August 16, 2023, 11:09am UTC](https://meta.discourse.org/t/header-glass/275367 "2023-08-16T11:09:53Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 16, 2023, 11:09am UTC](https://meta.discourse.org/t/header-glass/275367/1 "2023-08-16T11:09:53Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Adds a glassy, translucent background to the header |
| 👓 | **Preview** | [Vimeo Demo](https://vimeo.com/854974662/bcb55714a2) |
| 🛠 | **Repository** | [https://github.com/denvergeeks/discourse-header-glass](https://github.com/denvergeeks/discourse-header-glass) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
[ ](https://vimeo.com/854974662)
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 4:53am UTC](https://meta.discourse.org/t/header-glass/275367/2 "2023-08-18T04:53:06Z")
oh that’s cool. i like that and may use it on my forum. i have semi transparent headers but i like that glass effect. nicely done! 👏🙂
does the component have any settings?
edit: i see now it doesn’t. i love the shadowed icons!
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 18, 2023, 4:56am UTC](https://meta.discourse.org/t/header-glass/275367/3 "2023-08-18T04:56:32Z")
No settings, but requests and PRs are most welcome!!!
Ah the shadowed header icons… here’s all of the CSS…
```plaintext
.d-header {
background: rgb(147, 147, 147, 0.39) !important;
-webkit-backdrop-filter: blur(10px) !important;
-moz-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5) !important;
color: rgb(255 255 255) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.d-header-icons .d-icon,
.header-sidebar-toggle button .d-icon {
color: rgb(255 255 255) !important;
fill: rgb(255 255 255) !important;
filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.4)) !important;
}
```
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 4:57am UTC](https://meta.discourse.org/t/header-glass/275367/4 "2023-08-18T04:57:23Z")
i love this visual effect. curious about colored glass look.
i wanna make a stained glass effect now 😂
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 5:01am UTC](https://meta.discourse.org/t/header-glass/275367/5 "2023-08-18T05:01:45Z")
i’ve already forked the code lol
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 18, 2023, 5:02am UTC](https://meta.discourse.org/t/header-glass/275367/6 "2023-08-18T05:02:09Z")
> **[glassmorphism-generator](https://css.glass/)**
>
> \## 👉 \_Introducing: \[UXCanvas.ai\](https://uxcanvas.ai?utm\_source=cssglass)\_ - The AI-powered UI/UX Design Agent.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 5:02am UTC](https://meta.discourse.org/t/header-glass/275367/7 "2023-08-18T05:02:42Z")
nice! thanks for the linky 🤗
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 18, 2023, 5:03am UTC](https://meta.discourse.org/t/header-glass/275367/8 "2023-08-18T05:03:11Z")
https://codepen.io/anthesema/embed/preview/LaYBPa?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=LaYBPa
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 5:04am UTC](https://meta.discourse.org/t/header-glass/275367/9 "2023-08-18T05:04:37Z")
oh. my. god. 😻
now you’ve inspired me to start building a new theme for my forum. 😁
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 18, 2023, 9:53am UTC](https://meta.discourse.org/t/header-glass/275367/10 "2023-08-18T09:53:57Z")
@Lilly I can hardly wait to see your creation! You Go Girl!!!
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 18, 2023, 10:19am UTC](https://meta.discourse.org/t/header-glass/275367/11 "2023-08-18T10:19:50Z")
meh, theme design isn’t really my forte. i can make them , but i prefer the creativity of components and functional type solutions, especially for others who define a need.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 19, 2023, 2:01am UTC](https://meta.discourse.org/t/header-glass/275367/12 "2023-08-19T02:01:47Z")
Site Architecture, Navigation, UI / UX – it’s all functional art 🖼 created to help people connect in the most satisfying ways.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 21, 2023, 3:18am UTC](https://meta.discourse.org/t/header-glass/275367/13 "2023-09-21T03:18:03Z")
Zoinks! forgot to post a link - I added color and transparency settings for kicks 🙃
> **[GitHub - Lillinator/glass-header: glass header](https://github.com/Lillinator/glass-header)**
>
> glass header
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 21, 2023, 7:14pm UTC](https://meta.discourse.org/t/header-glass/275367/14 "2023-09-21T19:14:56Z")
Zoinks! Thank you @Lilly! I’ve added your color and transparency settings, and also a setting for the drop shadow on the header icons.
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [October 23, 2024, 2:55am UTC](https://meta.discourse.org/t/header-glass/275367/15 "2024-10-23T02:55:58Z")
I think it still looks good with shadows hopefully I can get a switch for it
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [October 23, 2024, 2:01pm UTC](https://meta.discourse.org/t/header-glass/275367/16 "2024-10-23T14:01:12Z")
Hello @Monikas thank you for the feedback but could you please elaborate on what exactly you’d ideally like in the settings?
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [October 24, 2024, 8:16am UTC](https://meta.discourse.org/t/header-glass/275367/17 "2024-10-24T08:16:39Z")
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [October 24, 2024, 9:16am UTC](https://meta.discourse.org/t/header-glass/275367/18 "2024-10-24T09:16:33Z")
Ah, yes. I have now added a setting for the shadow on the bottom edge of the header.