While on my day job over at Company 52, I encountered a textured background with a gradient overlay, using Photoshop’s overlay blending mode. I’m sure you’ve seen this effect before:
My first thought was to save the texture as a 4×4 PNG for tiling, and to save the gradient as a PNG with alpha transparency to overlay over the tiled pattern. This would certainly be lighter than saving a monolithic image, but this presented several problems:
- The size of the gradient PNG was still too large, especially when the gradient can be done in CSS
- The gradient overlay would be overlaid like Photoshop’s normal blending mode, not in the desired overlay mode, which would make the background look washed out.