Some ⭐️⭐️⭐️⭐️⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could “fill” the shape of the stars partially. I like this idea by Samuel Kraft. The tricky part is:
The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS
mix-blend-modeproperty with the
Check out Samuel’s post for an interactive demo and deeper information, but I thought I’d give it a crack myself to get a feel for the idea:
The idea is that this is an overlay on top of the stars. You can’t see it and it doesn’t affect the stars because it’s either
mix-blend-mode: color; means that overlay will only effect elements that do have color.
There are loads of ways to do rating stars, for the record. We covered five of them a little while back. One rather clever method in there is using unicode stars (like, as text), then filling their background with
-webkit-background-clip: text; which means you can partially fill them (like with a hard-stop
linear-gradient()). Solid trickery, that.