filter: drop shadow just on background

Question

I am using a .png image and I want to create a big white shadow, like an aura, around it; but I want it just to affect the background, and not text and other elements I have in the page!

How it could be helped? Is there a method for making the shadow hit just the background? Or i can't at all? Thanks!

HTML:

<div class="background">
    <div id="round"></div>
    <div class="text">
        TEXT
    </div>
</div>

CSS:

#round {
  filter: drop-shadow(0px 0px 40px red);
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 0px;
  display: inline-block;
}

.background {
  background-color: #ddd;
}

.text {
  color: yellow;
  font-weight: bold;
  font-size: 50px;
  float: left;
}

This way the shadow will be reflected on the text, that is not what i want to archieve.

As asked, also a fiddle of the problem: https://jsfiddle.net/k371t6jd/

I really think we need an image of what this is **supposed** to look like. — Paulie_D, Jun 14 '16 at 10:42
like it is shown in the fiddle, it is like an aura; i changed the colors to exaggerate the problem. — Marco-dev, Jun 14 '16 at 10:48
The fiddle shows me nothing...that's why the design image woudl be preferable. — Paulie_D, Jun 14 '16 at 11:32
It shows that the glow of the shadow overlap the text, making it different in color while i don't want the glow to affect the text or the other white background. — Marco-dev, Jun 14 '16 at 12:00

score 0 · Accepted Answer · answered Jun 15 '16 at 16:25

0

Nobody could give an answer. The solution was: you can't. Regards.

answered Jun 15 '16 at 16:25

Marco-dev

202
2
11

filter: drop shadow just on background

1 Answers1