New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x]

[Jfin]

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.

[Sphinx Coldhand]

My favorite theme! Big thank you for the 10.11 update. Keep up the good work!

[Sphinx Coldhand]

What would be the CSS code (for both theme variants) to blur the background image of the home page?

[Ted Hinklater]

It already is?



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);
}

[Sphinx Coldhand]

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);}

[Ted Hinklater]

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

[Sphinx Coldhand]

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%);}

after the @import, the backdrop is blured, but all, not only for the homepage.
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.

[jakamy]

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