Drawing Using CSS Background Gradients

Why?

• why not

Benefits

• Easy(ish) to manage and edit
• One single DOM Element
• Fast(ish) loading

Drawbacks

• No dynamic variables
• Limited to straight lines and circles

How do we start?

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

CSS Gradients

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

Examples

Tessellations

Regular Tesselations

O. Deger, Kubra & Değer, Ali. (2012). An Application of Mathematical Tessellation Method in Interior Designing. Procedia - Social and Behavioral Sciences. 51. 249–256. 10.1016/j.sbspro.2012.08.154.