CODEWITHSUNDEEP
javascripthtmlcss
OfficialGoat
OfficialGoat

Reputation: 13

CSS Frosted glass look without backdrop-filter but including radial-gradient

Im trying to implement a design for Anki cards, I made in Figma, in CSS.

This site does a great job explaining how to accomplish the background blur without backdrop-filter (not supported in Anki). But so far I was not able to figure out how to add a radial-gradient over the background image before I blur it (to add a directional light effect).

The main Problem seems to be the fact that background: inherit; is used to align the background images. And I don't quite get how to align them without the inherit option.

So, is there a way to get the gradient "included" in the blur?

Here is the code from the tutorial (in case the link breaks). And this is the codepen.

body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    /* Keep the inherited background full size. */
    background-attachment: fixed; 
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.container:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}

<div class="container"></div>

Upvotes: 1

Views: 987

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

Use CSS variable to store the image and be able to add your gradient:

body {
  --img: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3);
  background: var(--img) center/cover fixed no-repeat;
  display: grid;
  place-items:center;
  height: 120vh;
}

.container {
  width: 30rem;
  height: 20rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.container:before {
  content: "";
  position: absolute;
  background: 
      radial-gradient(transparent, red), /* your background here */
      var(--img) center/cover fixed no-repeat;
  z-index: -1;
  inset:0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}
<div class="container"></div>

Upvotes: 1

Related Questions