{"id":4594,"date":"2024-12-03T15:50:56","date_gmt":"2024-12-03T20:50:56","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4594"},"modified":"2024-12-03T15:50:57","modified_gmt":"2024-12-03T20:50:57","slug":"pure-css-halftone-effect-in-3-declarations","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/pure-css-halftone-effect-in-3-declarations\/","title":{"rendered":"Pure CSS Halftone Effect in 3 Declarations"},"content":{"rendered":"\n

About half a decade ago, I got an idea about how to create a halftone effect with pure CSS. My original idea (which Michelle Barker wrote about<\/a> a couple of years ago) was a bit inefficient, but in the years that followed, I’ve managed to polish it and reduce it to a single <div><\/code>, no pseudos and just three CSS properties.<\/p>\n\n\n\n

What’s a halftone effect?<\/h2>\n\n\n\n

If you don’t know what a halftone<\/a> effect is, a very basic pattern looks like this:<\/p>\n\n\n\n

\"\"
The simplest possible halftone pattern<\/figcaption><\/figure>\n\n\n\n

This is what we’ll be creating with a single <div><\/code> (no pseudo-elements) and only three CSS declarations. Afterwards, we’ll go through a bunch of variations and see some cooler-looking demos.<\/p>\n\n\n\n

The 3 CSS Declarations<\/h2>\n\n\n\n

The first declaration<\/strong> is a background<\/code> and it consists of two layers. One is the pattern<\/strong> – the dots in our most basic case. The other is the map<\/strong> – this decides where the dots are bigger and where they are smaller. In the most simple case, it’s a linear gradient. So what we have so far in terms of code looks like this:<\/p>\n\n\n

background<\/span>: \n  radial-gradient<\/span>(closest-side<\/span>, #000<\/span>, #fff<\/span>) 0\/ 1em<\/span> 1em<\/span> space<\/span>, \n  linear-gradient<\/span>(90deg<\/span>, #000<\/span>, #fff<\/span>);<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Taken separately, the two layers look like this:<\/p>\n\n\n\n
\"\"
the pattern and the map<\/figcaption><\/figure>\n\n\n\n
Before we move any further, let’s take a closer look at these gradients. Each of the two layers goes from black<\/code>, which can also be written as rgb(0%, 0%, 0%)<\/code> or hsl(0, 0%, 0%)<\/code> to white<\/code>, which can also be written as rgb(100%, 100%, 100%)<\/code> or hsl(0, 0%, 100%)<\/code>.<\/p>\n\n\n\n
Dead in the middle we have grey<\/code>, which is rgb(50%, 50%, 50%)<\/code> or hsl(0, 0%, 50%)<\/code>. This is the 50%<\/code> lightness grey or, in short, as we’ll be calling it from now on, the 50%<\/code> grey.<\/p>\n\n\n\n
Note that in the case of any<\/em> grey, wherever it may be situated in between black and white, the saturation (the ‘S’ in HSL) is always 0%<\/code>, while the hue (the ‘H’ in HSL) is irrelevant, so we just use 0<\/code>. The only value that changes is the lightness (the ‘L’ in HSL), which goes from 0%<\/code> for black<\/code> to 100%<\/code> for white<\/code>.<\/p>\n\n\n\n
Basically, going from 0%<\/code> to 100%<\/code> along the gradient line means going from 0%<\/code> to 100%<\/code> along the lightness axis of the HSL bicone<\/a>.<\/p>\n\n\n\n
\"\"
HSL bicone slice showing the lightness axis (live demo<\/a>)<\/figcaption><\/figure>\n\n\n\n
So in general, any p%<\/code> grey can be written as rgb(p%, p%, p%)<\/code> or hsl(0, 0%, p%)<\/code>.<\/p>\n\n\n\n
This can be seen in the interactive demo below where you can drag the bar along the entire lightness range.<\/p>\n\n\n\n
We’ve made sure we have an integer number of dots along both axes by using the space<\/code><\/a> value for background-repeat<\/code>.<\/p>\n\n\n\n