From the course: Design Aesthetics for the Web

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Pattern and gradation

Pattern and gradation

From the course: Design Aesthetics for the Web

Start my 1-month free trial

Pattern and gradation

- [Instructor] In the wake of the flat design trend, what's old is suddenly new again. Namely, many designers have started adding depth and interest to elements in their web layouts by applying principles of pattern and gradation to element backgrounds. To refresh your memory about pattern and gradation, pattern offers you a way to keep your design organized, as well as providing a sense of harmony through the use of repeating elements, while gradation refers to any gradual change that occurs by a series of stages, steps, or degrees. With CSS three, and SVG, you can use these principles to add style to the background of nearly any element. While there are several easy ways to apply patterns and gradients to web element backgrounds, I'd like to share a few of my favorites. The first method, shown here in the second row, uses a simple CSS repeat to tile a graphic. Tiles are generally designed to be seamless, so that when they repeat, you can't identify the start or end. Tiles can repeat…

Contents