13 Gradients, shadows, and blend modes
This chapter covers
- Linear, radial, and conical gradients
- Color interpolation in different color spaces
- Box shadows and text shadows
- Sizing and positioning background images
- Using blend modes to combine backgrounds and content
We’ve covered a lot of ground by this point. You’ve deepened your understanding of the fundamental workings of CSS. You’ve learned multiple aspects of layout. And you’ve taken time to make sure your code is organized and maintainable. We’ve covered the essentials needed to build a site from the ground up. Finally, you’ve learned how to pay attention to the details of spacing, typography, and other concerns of web design.
In the next two chapters, I’ll show you techniques for achieving particular effects and adding visual interest to the page. You’ll likely use some of these effects frequently—in particular, gradients and shadows—while others you may need only occasionally. It’s almost certain you’ll never use these effects all at once, so I’ll focus primarily on isolated examples rather than a large comprehensive page.