glass effect for the box inside the banner container in the latest dawn theme

Store Design
1

I’m trying to create a glass effect in for the container inside the banner on the dawn theme, when i paste the CSS in the custom CSS box it previews correctly but once i hit save it reverts back, it’s also the same when i preview in a browser. I’m guessing somethin is over riding it but as i’m not exactly a dev i can’t figure it out.. chatGPT is also not helping (no surprise there!)

.banner__box.content-container {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  padding: 50px !important;
  margin: 0 auto !important;
  max-width: 800px !important;
  min-height: 300px !important;
}

any help would be much appricated.

2

@RadarVR - can you share the page link where you added this?

3

Hello @RadarVR

Please try this code.

.banner__box.content-container {
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 10px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
padding: 50px !important;
margin: 0 auto !important;
max-width: 800px !important;
min-height: 300px !important;
}
.shopify-section .banner__box.content-container {
background: rgba(255, 255, 255, 0.2) !important;
}