Advanced glows in CSS
During a design review at the project I work at, the following image was presented:
The Design Team called them “glows”, and they were to be used in so called “Story telling components”.
The idea was to use these glows as backgrounds, and position products in front of them, to give it a smooth presentational look, while still not diverting attention away to the background.
I immediately liked the idea behind it, and started to think about how to put these glows into CSS-practice.
Simple Glow
The left one seems easy enough, right?
In CSS terms, this could simply be a radial-gradient in the background.
Alright, so it’s a glow, but it’s a bit bland. I was curious about how the Design Team created this, so I asked them what they had done to achieve this result:
Multi Layered Glow
Apparently this effect was achieved by layering multiple glows on top of each other: the white circles in the left glow, indicated that there were several layers present to this glow, with different sizes, and on top of it all, a mask.
To achieve this effect, we can use the fact that it’s possible to add multiple radial-gradients to the same background property.
The only thing missing now is the mask:
(You can find more information on masks further on in this post)
This gives us a smoother result, and more importantly, it allows us to mix colours:
Linear Glow
The glow on the right in the first image looked a bit more tricky.
CSS gives us only 3 types of gradients: radial-gradient, linear-gradient and the lesser known conic-gradient.
None of them will get us the result we want, so we’ll have to use some CSS trickery, and combination of…
Linear gradient
The main component of this glow would be a linear gradient:
background: linear-gradient(125deg, aqua 13%, deeppink 38%);Masking
While looking at the right glow, I thought to myself:
“Oh, I could create this easily in photoshop using a layer mask!”
Turns out CSS has a very similar property called -webkit-mask, and is supported by most common browsers.
webkit-mask can take a URL with a png mask
-webkit-mask: url(mask.png);…but also another radial-gradient!
-webkit-mask: radial-gradient(circle at 20% 50%, black 0%, transparent 25%);Applying this mask to our existing gradient, we get the desired effect!
Putting it all together
Time to put it to work, slap an image and some text on there!
Linear Glow
Multi Layered Glow
Future improvements
The next logical step would be to pour this in a SASS Mixin where we can configure…
- Colors
- Horizontal alignment: left - center - right
- In pixels, later in percentages
I’ll be hashing this out in a future blog post, so stay tuned for more! 🚀
