Fractional SVG stars with CSS

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-mode property with the color value.

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 black or white and 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.

Direct Link →