Gradient Blobs & Halftone Effects

CSS Café

Gradient blobs

Halftone effects

Shape blobbing - the beginning

How does this work?

.blob{/* dimensions */border-radius:50%;background:white;}.container{/* layout */background:black;}

Gradient blobs?

.blob{/* dimensions */border-radius:50%;background:linear-gradient(#42033d,#ff9b54);}.container{/* layout */}

blur() and contrast() basics

Behind blur(): grids!

two parrots kissing
two parrots kissing

The blur process

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(2n-1)

Getting the grid: outer product of vector with itself


blur() consequences

blur() conclusions

Contrast values < 1

Contrast values > 1

contrast() consequences

contrast() conclusions

Two blurred elements

Contrasting against the parent's background

Gradient idea: blend modes!

Blending basics



Gradient blobs, image background
.panel{/* basic styles */}.group{/* basic styles */}

The hollow effect

.container{/* basic styles */--bg:black;background:var(--bg)}.hollow{/* basic styles */border-color:white;background:var(--bg);}						

Hollow gradient blobs, image background
.hollow{}.container{}.panel{/* same as before */}.group{/* same as before */}

CSS masking

Halftone basics

Halftone technique

.container: .halftone
.halftone{/* inherit dimensions */background:radial-gradient(black,transparent)0 0 }.container{/* set dimensions */--s:2em;}

Halftone image idea: change mask-mode

Better halftone image technique: use blending

.halftone::before{/* inherit dimensions */background:url(/img/portrait_tiger.jpg)50%/ cover;filter:grayscale(0) }

Filtering backgrounds

The possibilities are endless!

Thank you!