REPEATING BACKGROUND SIMPLE CSS CODE

We’re not going to walk through it here, but it’s another intriguing one to study! Limitationsīecause we’re using a filter and blend mode, either our dots or the background ideally need to be white or black. Halftone pattern explorer by Michelle Barker ( CodePen.Īna has another demo that applies a halftone treatment to non-transparent images. You can also adjust a few custom properties using the controls to explore some different options. We can use images too: Either SVGs or transparent PNGs. We could use radial gradients, conic gradients, repeating gradients (or a combination!). We’re using a simple linear gradient as a mask, but there are endless possibilities for interesting, creative effects. Halftone background with blend modes by Michelle Barker ( CodePen. This demo shows the different effects produced by different combinations of blend modes and the invert filter. That’s how we get a circle with a smooth edge.halftone Instead of a smooth gradient where one colour blends into another, we’re using hard stops, so the colour goes from black to transparent without any blending. Let’s start with a simple dotted background, made with radial-gradient().

The effect when combined with the mask is where the magic happens. We’re going to take our radial gradient background and turn the contrast up high. The secret weapon: the contrast filter.

A mask, which will be the image or pattern we want to reproduce.

A repeating background, using radial-gradient.

To get this effect, we need three essential ingredients: But for a halftone effect, we need some variation in the size of the dots in order to depict an image or pattern. It’s simple enough to produce a dotted background in CSS by using radial-gradient(). Photograph from Unsplash by Regine Tholen, converted to halftone Halftone in CSS You might have come across the style in older comic books, where colour reproduction was limited. It was originally invented as a technique for printing images in journals and other publications at a time when other printing processes were prohibitively expensive. Halftone is defined as a reproduction of an image in which dark and light variations in tone are produced by variously sized dots. For the purpose of this article we’re just going to be concentrating on the halftone pattern itself, rather than the animation.

REPEATING BACKGROUND SIMPLE CSS CODE

As I had a little time to spare, I thought I’d dig into the code and see how it was done! Ana’s demos are made using Sass - what better way to learn than to try to produce similar effects using vanilla CSS? One of Ana Tudor’s beautiful halftone patterns created with CSSĪna’s demo uses Houdini to animate the halftone background (only supported in Chromium browsers). A little while ago, Ana Tudor created an impressive collection of halftone patterns using only CSS.

Repeating background simple css