Search code examples
htmlcssbackground-imageglow

Background with glow image


I'm designing a website that has a background image of text with an image that has a background glow in the center. I've been playing with the following two solutions:

  1. Just create one background image. Downside: I need to make various resolution background images to respond to different viewports.

  2. Create one background image with the text then place the image with glow on top of it in the body. Downside: I can't make it glow in CSS3 and I can't make an image file with glow that is transparent around the glow in a way that looks good.

My main question: Is there a way, using CSS3, to place a glow on an image where the glow isn't just a box? I believe the answer is no but I just wanted to make sure I'm not missing anything.

Any other advice would be appreciated!


Solution

  • The more I worked through it, I realized that using a transparent PNG on top of the background image will achieve my desired result.

    Thank you all who commented on my question and provided very helpful answers! I appreciate it very much!