Gradient Blobs & Halftone Effects

CSS Café 25th of June 2020

Gradient blobs

no SVG
no canvas
no JS
just HTML & CSS

Halftone effects

Shape blobbing - the beginning

How does this work?

.container.blob.blob

#ex--basic-blobs .blob{/* dimensions */border-radius:50%;background:white;filter:blur(9px)}#ex--basic-blobs.container{/* layout */background:black;filter:contrast(27)}

transparent background?
image background?
pastel blobs?
gradient blobs?

Gradient blobs?

.container.blob.blob

#ex--wrong-blobs .blob{/* dimensions */border-radius:50%;background:linear-gradient(#42033d,#ff9b54);filter:blur(9px)}#ex--wrong-blobs.container{/* layout */filter:contrast(27)}

dead end
now what?

`blur()` and `contrast()` basics

both work on a per channel basis
blur(0px) preserves the input and so does contrast(1)
negative values cause the browser to discard the filter declaration
contrast() doesn't affect the alpha channel

Behind `blur()`: grids!

The blur process

4px×4px element
3×3 weight grid

Visualising weights

`3×3 grid (Σ=4)`

`5×5 grid (Σ=16)`

`7×7 grid (Σ=64)`

Getting the grid: Pascal's triangle

Grid Size`(n)`	Vector	Weight Sum`(2^n-1)`
`1`		`1`
`2`		`2`
`3`		`4`
`4`		`8`
`5`		`16`
`6`		`32`
`7`		`64`
`8`		`128`
`9`		`256`

Getting the grid: outer product of vector with itself

×

=

`blur()` consequences

element expands outside original boundaries by floor(n/2) (semitransparent) pixels
for fully opaque original element: floor(n/2) pixels from each edge inside original boundaries semitransparent (n is the size of the weight grid)
post-blur RGBA values of a pixel are also affected by RGBA values of pixels around

#ex--blur-prob .box{/* dimensions */background:linear-gradient(#42033d 25%,#ff9b54 0) 0/ 1% 20%}#ex--blur-prob .blur{filter:blur(9px)}

`blur()` conclusions

only way to preserve RGB values is for blurred element to have a solid background
cannot set a gradient background on an element and then be able to somehow recover it post-blur

Contrast values `< 1`

subunitary values push RGB channels to the middle of the 0,255 interval
a value of 0 ⇒ always a fully grey (that's a 50% grey: hsl(h, 0%, 50%)) element

Contrast values `> 1`

superunitary values push RGB channel values towards nearest end of 0,255 interval
large enough values push them all the way to 0 or 255, such that we only have:

#000 rgb(0,0,0) black
#00f rgb(0,0,255) blue
#0f0 rgb(0,255,0) lime
#0ff rgb(0,255,255) cyan (aqua)
#f00 rgb(255,0,0) red
#f0f rgb(255,0,255) fuchsia (magenta)
#ff0 rgb(255,255,0) yellow
#fff rgb(255,255,255) white

`contrast()` consequences

changes every pixel that doesn't have all 3 RGB channels either 0 or 255
doesn't affect the alpha channel

`contrast()` conclusions

RGB channels of input's pixels are preserved only if they're all either 0 or 255
cannot have pastel backgrounds and keep them after applying this filter

Two blurred elements

8px×8px element
7×7 weight grid
compound alpha of 2 semitransparent layers:a₀ + a₁ - a₀·a₁
compound alpha of two layers, both of alphas <.5,
may compute to >.5for example: .3 + .3 - .3·.3 = .6 - .09 = .51

Contrasting against the parent's background

put blurred elements in container with background:white
semitransparent black on solid white produces grey
if this is darker than #808080, high contrast on container pushes it to black
otherwise, high contrast pushes it to white
an alpha <.5 means a grey darker than #808080
actual formula for RGB channels:ch₀ + (ch₁ - ch₀)·a₁

Gradient idea: blend modes!

Blending basics

combine two overlapping layers into one
Blending
done on a per channel basis
only care about multiply and screen
% channel values are used
0 is always 0
255 ➝ 100% ➝ 1
everything in between becomes a subunitary value
for example: 220,20,60 ➝ 86%,8%,24% ➝ .86,.08,.24

`multiply`

multiply channel valuesch₀·ch₁
black has all RGB channels 0
anything multiplied by 0 is 0
a layer's pixel is black ⇒ result also black
anything multiplied by 1 remains unchanged
a layer's pixel is white ⇒ result identical to other layer's corresponding pixel

mix-blend-mode:multiply

`screen`

reverse of multiply (multiply ➝ AND, screen ➝ OR)
multiply 1 minus channel values, subtract all from 11 - (1 - ch₀)·(1 - ch₁)
white has all RGB channels 1
a layer's pixel is white ➝ result pixel also white
1 - (1 - 1)·(1 - ch₁) = 1 - 0·(1 - ch₁) = 1
a layer's pixel is black ⇒ result identical to other layer's corresponding pixel
1 - (1 - 0)·(1 - ch₁) = 1 - 1·(1 - ch₁) = ch₁

mix-blend-mode:screen

Gradient blobs, image background

.group.panel.grd.panel.container.blob.blob.group.panel.img.panel.container.blob.blob

#ex--full-blobs .panel{/* basic styles */mix-blend-mode:multiply;transform:translatey(0)}#ex--full-blobs .group{/* basic styles */mix-blend-mode:screen;transform:translate(0)}

The hollow effect

.container.iso.hollow.hollow

#ex--plain-hollow.container{/* basic styles */--bg:black;background:var(--bg)}#ex--plain-hollow .hollow{/* basic styles */border-color:white;background:var(--bg);mix-blend-mode:screen;mix-blend-mode:multiply}						#ex--plain-hollow .iso{isolation:isolate}

Hollow gradient blobs, image background

.group.panel.grd.panel.container.iso.hollow.hollow.group.panel.img.panel.container.iso.hollow.hollow

#ex--full-hollow .hollow{filter:blur(5px)}#ex--full-hollow .container{filter:contrast(27)}#ex--full-hollow .panel{/* same as before */mix-blend-mode:multiply;transform:translatey(0)}#ex--full-hollow .group{/* same as before */mix-blend-mode:screen;transform:translate(0)}

CSS masking

default CSS masks are alpha masks
every pixel of an element gets corresponding mask pixel alpha

linear-gradient(red,transparent)

Halftone basics

by default, CSS masks are alpha masks
element pixels have different alphas ⇒ resulting alpha after applying the mask is, for each pixel, its initial background alpha multiplied with corresponding mask pixel alphaa = aₑ·aₘ
alpha values are all in the [0, 1] interval
multiplying two values ≤ 1 gives us a result that's ≤ smallest of the two values
resulting pixel alpha after applying the mask is never bigger than before
a pixel can be more transparent after applying the mask, but never less
if all pixels are semitransparent black and the element is on top a white one, visual result is grey, lighter or darker, depending on each top pixel's alpha

Halftone technique

.container: .halftone

#ex--halftone .halftone{/* inherit dimensions */background:radial-gradient(black,transparent)0 0/ var(--s) var(--s) 
                    repeat;mask:linear-gradient(red,rgba(0,0,0,1) 100%)}#ex--halftone.container{/* set dimensions */--s:2em;background:white;filter:contrast(27)}

Halftone image idea: change `mask-mode`

caveat: mask-mode only supported in Firefox
mask-mode: luminance makes pixels corresponding to black in the mask fully transparent and those corresponding to white fully opaque
anything in between gives semitransparency
mask-type in SVG also lets us switch between alpha and luminance
mask-type is applied on SVG <mask>, while mask-mode is applied on masked element

Better halftone image technique: use blending

#ex--img-blend.halftone::after{/* inherit dimensions */--s:1.25em;background:radial-gradient(black,white)0 0/ var(--s) var(--s) 
                    repeat;mix-blend-mode:screen}#ex--img-blend.halftone{filter:contrast(9)}#ex--img-blend.halftone::before{/* inherit dimensions */background:url(/img/portrait_tiger.jpg)50%/ cover;filter:grayscale(0) blur(0px)}

Filtering backgrounds

only supported in Safari for now
would allow us to use two background layers instead of two pseudo-elements
note that the code below hasn't actually been tested

background: radial-gradient(black, white)  0  0/  .25em .25em repeat,
    filter(url(tiger.jpg) 50%/ cover, invert(1) blur(2px));
background-blend-mode: screen;
filter: contrast(9)

3×3 grid (Σ=4)

5×5 grid (Σ=16)

7×7 grid (Σ=64)

Go play!

`3×3 grid (Σ=4)`

`5×5 grid (Σ=16)`

`7×7 grid (Σ=64)`