+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] (/t-new-update-liquid-glass-jellyfin-theme-glassmorphism-10-11-x)
RE: jellyfin theme glassmorphism [10.10.x] Music player Update, Backdrop Support - Jfin - 2025-10-29
A big thank you for your theme, blends well with iOS 26. I hope you keep improving it, I’m using it full-time now.
RE: jellyfin theme glassmorphism [10.10.x] Music player Update, Backdrop Support - Sphinx Coldhand - 2025-10-29
My favorite theme! Big thank you for the 10.11 update. Keep up the good work!
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - Sphinx Coldhand - 2025-11-05
What would be the CSS code (for both theme variants) to blur the background image of the home page?
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - Ted Hinklater - 2025-11-06
It already is?
![[Image: Screenshot-from-2025-11-06-12-13-12.png]](https://i.ibb.co/PZfsHdFC/Screenshot-from-2025-11-06-12-13-12.png)
but if you're just asking in general, this theme uses a ::before layer over .backgroundContainer.withBackdrop with css that blurs anything beneath it:
Code:
#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backgroundContainer.withBackdrop::before {
backdrop-filter: blur(30px) saturate(80%) brightness(60%);
- webkit-backdrop-filter: blur(30px) saturate(80%) brightness(60%);
}You can do it that way or you can apply a blur to the backdrop itself on the homepage
Code:
#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backdropContainer > .backdropImage {
filter: blur(30px);
}RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - Sphinx Coldhand - 2025-11-06
I want to apply a blur only to the backdrop itself only on the homepage.
I tried both of your codes, none worked out.
Here is what I used:
Code:
@import 'https://cdn.jsdelivr.net/gh/alexyle/jellyfin-theme@liquid-glass/glassmorphism/theme.css';
#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backdropContainer > .backdropImage {filter: blur(30px);}RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - Ted Hinklater - 2025-11-06
Yeah the theme is overriding it with its own blur, best bet is to copy the whole theme css instead of using the import link, and editing out the blur bit i mentioned
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - Sphinx Coldhand - 2025-11-06
From my understanding, the CSS is executed from top to bottom.
If I add, for example:
Code:
.backdropImage {filter: blur(20px) saturate(120%) contrast(120%) brightness(40%);}So, the blur is not overriden by @import (it comes after the @import).
To me it seems that it has to be a possibility to achive the desired effect only for the homepage.
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - jakamy - 2025-11-09
Made an all glass tweak for my taste here:
- Glass play buttons and cards
- (commented using copilot for easy edits)
/* Base styling for detail buttons */
.detailButton {
color: #fff; /* White text for contrast */
background: radial-gradient(
ellipse at center, /* Elliptical gradient centered */
rgba(0, 0, 0, 0.4), /* Dark translucent center */
rgba(0, 0, 0, 0.1) /* Fades to lighter edge */
);
backdrop-filter: blur(2px); /* Applies blur behind element */
-webkit-backdrop-filter: blur(2px); /* Safari support */
border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
border-radius: 40px; /* Rounded pill shape */
}
/* Hover effect for detail buttons */
.detailButton:hover {
background: radial-gradient(
ellipse at center,
rgba(255, 255, 150, 0.
, /* Bright yellow center */rgba(255, 255, 0, 0.4) /* Fades to yellow edge */
);
box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Yellow glow on hover */
}
/* Styling for play buttons inside detail buttons */
.detailButton.btnPlay.play-button {
color: #fff;
background: radial-gradient(
ellipse at center,
rgba(128, 128, 0, 0.4), /* Olive yellow center */
rgba(255, 255, 0, 0.1) /* Fades to light yellow edge */
);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 40px;
}
/* Hover effect for play buttons */
.detailButton.btnPlay.play-button:hover {
background: radial-gradient(
ellipse at center,
rgba(255, 255, 150, 0.
, /* Bright yellow center */rgba(255, 255, 0, 0.4) /* Yellow edge */
);
box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Glow effect */
}
/* Styling for Emby home library buttons */
.homeLibraryButton.emby-button {
color: #fff;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.4), /* Dark translucent center */
rgba(0, 0, 0, 0.1) /* Fades to lighter edge */
);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 40px;
}
/* Hover effect for Emby buttons */
.homeLibraryButton.emby-button:hover {
background: radial-gradient(
ellipse at center,
rgba(255, 255, 150, 0.6), /* Bright yellow center */
rgba(255, 255, 0, 0.2) /* Yellow edge */
);
box-shadow: 0 0 12px rgba(255, 255, 0, 0.4); /* Glow effect */
}
/* Styling for card boxes */
.cardBox {
color: #fff;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.4), /* Dark translucent center */
rgba(0, 0, 0, 0.1) /* Fades to lighter edge */
);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; /* Slightly rounded corners */
}
Cheers
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - ClayboyX - 2025-12-02
Is there any way to make an OLED version with a true black background
RE: New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x] - alexyle - 2025-12-06
(2025-12-02, 02:09 AM)ClayboyX Wrote: Is there any way to make an OLED version with a true black background
you can add
Code:
:root {
--bg-color: rgb(0 0 0) !important;
}