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.

13.1 Gradients

13.1.1 Multiple color stops

13.1.2 Color interpolation

13.1.3 Radial gradients

13.1.4 Conic gradients

13.2 Shadows

13.2.1 Adding depth with gradients and shadows

13.2.2 Creating elements with a flat design

13.2.3 Creating buttons with a hybrid look

13.3 Blend modes

13.3.1 Tinting an image

13.3.2 Types of blend modes

13.3.3 Adding texture to an image

13.3.4 Mix blend modes

Summary