Chapter 13: Gradients, shadows, and blend modes

Introduction

Introduces visual effects through a button whose gradient and shadow create an illusion of depth.

• Gradient and shadow depth: Explain how the example button uses a gradient and a drop shadow together to appear three-dimensional.
  Why it matters: It shows how two subtle CSS effects can work together to change how an element appears.

Key terms: background gradient, drop shadow, illusion of depth

13.1 Gradients

Introduces CSS gradients as background images, explains how to make a basic linear gradient visible, and shows how to control its direction.

• Background shorthand and longhands: Explain that background is shorthand for eight properties and that using it resets unspecified background properties to their initial values. Describe why individual properties can be preferable when configuring several background settings.
  Why it matters: Choosing between the shorthand and individual properties helps you avoid accidentally changing other background settings.
• Gradient as background image: Describe how linear-gradient() supplies a gradient to background-image and why an empty element needs height to display the example.
  Why it matters: This explains both where a gradient is declared and why it may not appear on an empty element.
• Linear gradient direction: Explain how a linear gradient’s direction and two colors determine the example’s blend, and describe how direction keywords or clockwise degree values set its angle.
  Why it matters: Direction and color endpoints let you predict what a basic linear gradient will look like.

Key terms: background, shorthand property, individual properties, background-image, linear-gradient(), gradient, to right, deg, starting color, ending color

13.1.1 Multiple color stops

This section shows how multiple color stops create smooth transitions, hard-edged stripes, and repeating stripe patterns in CSS gradients.

• Multiple gradient color stops: Explain how to add color stops to a linear gradient and how their positions are determined or specified.
  Why it matters: Positioning stops lets you control where a gradient changes color.
• Hard-edged gradient stripes: Trace how color stops at matching positions produce solid bands and abrupt changes between colors.
  Why it matters: The same gradient function can draw crisp stripes instead of only smooth fades.
• Repeating stripe patterns: Explain how a repeating linear gradient extends a stripe pattern and why specified lengths are useful for it.
  Why it matters: A repeating gradient makes it practical to carry a stripe pattern across an element such as a progress bar.

Key terms: linear-gradient(), color stop, stripes, repeating-linear-gradient(), repeating gradients

13.1.2 Color interpolation

This section explains how color spaces and hue paths change a gradient’s intermediate colors, how to specify them in CSS, and how to handle browser limitations.

• Color space interpolation effects: Explain why gradients with the same endpoint colors can look different in different color spaces, using the yellow-to-blue example.
  Why it matters: The chosen color space can change the appearance of a gradient even when its endpoints stay the same.
• Gradient color space selection: Describe how to specify a gradient’s interpolation color space, what happens when none is specified, and why a fallback may be needed.
  Why it matters: Explicit selection lets you choose the interpolation effect without leaving unsupported browsers without a gradient.
• Polar hue path choices: Explain the available hue-direction choices for a gradient in a polar color space and the visible difference between shorter and longer paths.
  Why it matters: Choosing the other route around the hue wheel can turn a simple color change into a rainbow-like gradient.
• Neutral stop color quirks: Describe the unexpected intermediate colors reported for some polar-space gradients with neutral or transparent stops and the section’s suggested ways around them.
  Why it matters: These workarounds help avoid surprising colors when a gradient fades toward a neutral or transparent stop.

Key terms: color interpolation, sRGB, OKLCH, gray dead zone, in keyword, color space, fallback gradient, polar color spaces, shorter hue, longer hue

13.1.3 Radial gradients

This section explains how radial gradients spread from a point, how to control their shape and placement, and how to repeat them in rings.

• Radial gradient behavior: Explain how a radial gradient differs from a linear gradient and describe its default appearance in an element.
  Why it matters: The default behavior gives you a useful radial effect without extra parameters.
• Radial gradient customization: Describe how color stops, shape, size, and center position can be specified in a radial gradient.
  Why it matters: These options let you adjust where the effect begins and how it fills the element.
• Repeating radial patterns: Describe what repeating-radial-gradient() does and how its parameters relate to radial-gradient().
  Why it matters: It provides a way to extend one radial pattern into rings.

Key terms: radial gradient, radial-gradient(), elliptical, color stops, circle, at, repeating-radial-gradient(), concentric rings

13.1.4 Conic gradients

This section explains how conic gradients change color around a center, how to control their appearance, and why subtle color choices often work best in a design.

• Circular color progression: Distinguish a conic gradient from a radial gradient and name the CSS functions that create conic gradients.
  Why it matters: The direction of the color change tells you when a conic gradient is the right choice.
• First and last color stops: Explain why a conic gradient may have a hard edge and how to avoid it.
  Why it matters: Matching the end colors helps a gradient look continuous rather than visibly joined.
• Conic gradient settings: Describe how to set a conic gradient’s starting angle, center, color interpolation method, and color-stop locations.
  Why it matters: These settings let you place and orient the color change rather than accept the defaults.
• Subtle gradient color choices: Justify using low-contrast colors for gradients in real projects.
  Why it matters: A gradient can add depth without drawing attention to itself.

Key terms: conic gradient, radial gradient, conic-gradient(), repeating-conic-gradient(), color stops, hard edge, from <angle>, at <x-position> <y-position>, in <color-space>, contrast

13.2 Shadows

Introduces CSS shadow properties and explains how box-shadow values determine a shadow’s position, shape, softness, and size.

• Box and text shadows: Distinguish what box-shadow and text-shadow create.
  Why it matters: The two properties apply shadows to different parts of an element.
• Box shadow offsets and shape: Explain how box-shadow’s offsets and color position and color a shadow, and describe its default shape.
  Why it matters: These values determine where a basic box shadow appears and what shape it takes.
• Blur and spread radii: Distinguish the optional blur and spread radii in box-shadow, including the effects of positive and negative spread.
  Why it matters: Blur and spread let you change a shadow’s softness and size independently of its position.

Key terms: box-shadow, text-shadow, horizontal offset, vertical offset, border radius, blur radius, spread radius

13.2.1 Adding depth with gradients and shadows

The section shows how a gradient and box shadows give a button depth and make it appear pressed while active.

• Gradient and shadow depth: Explain how a subtle top-to-bottom gradient and an outward box shadow make the button look rounded and raised, and how a larger shadow offset would make it seem farther from the page.
  Why it matters: These small shading choices can make a flat button look like a physical object.
• Pressed button shading: Describe how the button’s :active state replaces its outward shadow with inset shadows to make it appear depressed, and how the two inset shadows contribute different shading.
  Why it matters: Changing the direction and placement of shading gives the button a visible pressed state.
• Skeuomorphic shading rationale: Explain why gradients and shadows suit a button designed to resemble a physical object.
  Why it matters: It explains why the gradient and shadows work together visually, not just which CSS effects are applied.

Key terms: gradient, box shadow, offset, :active, inset, skeuomorphism, highlights, shadows

13.2.2 Creating elements with a flat design

This section explains flat design’s visual approach and shows how a button can use restrained shadow and color changes while retaining a flat appearance.

• Flat design visual principles: Distinguish flat design from skeuomorphic design: flat design favors vivid, uniform colors and a simpler digital appearance rather than trying to emulate physical objects. Explain that it may still use gradients or shadows, but subtly.
  Why it matters: It helps you recognize when an effect supports a flat design rather than making it look three-dimensional.
• Flat button visual treatment: Describe how the example button keeps a flat appearance: it drops the rounded corners, uses a faint shadow directly beneath it, and changes to slightly darker blue backgrounds for hover and active states.
  Why it matters: The button shows how small styling choices preserve a flat look across normal, hover, and active states.

Key terms: flat design, skeuomorphic design, gradients, shadows, rounded corners, box shadow, vertical offset, alpha value, hover, active

13.2.3 Creating buttons with a hybrid look

Shows how to give a minimal button a hybrid flat-and-dimensional look using crisp shadows and a pressed-state movement.

• Crisp shadow as button edge: Explain how an unblurred box shadow creates the button’s thick-looking bottom edge while retaining curved corners.
  Why it matters: It shows how a shadow can suggest depth without making the button look heavily three-dimensional.
• Pressed button movement illusion: Trace how the active-state movement and shadow adjustment make the button appear pressed into the page.
  Why it matters: The coordinated changes make the press feel physical rather than merely shifting the whole effect downward.
• Text shadow on button lettering: Describe what text-shadow affects, its syntax, and how it differs from box-shadow in this button.
  Why it matters: It helps distinguish the button’s lettering effect from the shadow that forms its bottom edge.

Key terms: flat design, skeuomorphism, box-shadow, border radius, active state, transform, translateY(), vertical offset, text-shadow, x-offset

13.3 Blend modes

The section explains how multiple CSS backgrounds layer and how blend modes let opaque backgrounds combine visually.

• Multiple background layering: Explain how CSS layers comma-separated background images and when a lower background remains visible.
  Why it matters: The stacking order explains why adding a second background may appear to have no effect.
• Blending opaque backgrounds: Explain why a blend mode is useful for stacked opaque backgrounds and describe the multiply example’s visible effect.
  Why it matters: Blending offers visual effects that ordinary transparent layering cannot produce in the same way.
• Per-background property values: Describe how comma-separated background property values correspond to multiple images, including what happens when only one value is supplied.
  Why it matters: It lets you predict which image each positioning or sizing value affects.

Key terms: background image, linear gradient, transparent, blend mode, multiply, opaque, background position, background-size, background-repeat

13.3.1 Tinting an image

Shows how to tint a background image with a single hue by blending it with a background color, and why layer order determines the blend mode needed.

• Single-hue image tinting: Explain how a background color and the luminosity blend mode tint a full-color image while retaining its brightness and contrast.
  Why it matters: You can recolor an image without losing the light and dark detail that makes it recognizable.
• Blend layer order: Distinguish the luminosity mode used with a color behind the image from the color mode needed when the colored layer is in front.
  Why it matters: Changing the layer order can change the tint unless you also choose the appropriate blend mode.

Key terms: background-blend-mode, luminosity blend mode, background-color, luminosity, color blend mode, front layer, back layer

13.3.2 Types of blend modes

This subsection explains how CSS blend modes combine pixel colors and groups the modes into five types.

• Pixel blending across layers: Explain that a blend mode combines each pixel’s color in one layer with the corresponding pixel’s color in another to produce a new color in the composite image.
  Why it matters: This gives you a basic way to understand what changes when you try a different blend mode.
• Blend mode types and choice: State the five types of blend modes and describe why choosing a mode may take trial and error.
  Why it matters: The categories offer a starting point, but previewing results helps you find a useful mode.

Key terms: blend modes, layers, pixel, composite image, darkening, lightening, contrasting, compositing, comparing, trial and error

13.3.3 Adding texture to an image

Shows how to blend a repeating texture over an image while preserving its color and choosing a contrast blend mode to suit the texture.

• Texture blending and color: Explain how blending a second image can give a crisp image a textured appearance, and why a grayscale texture lets the original image’s color show through.
  Why it matters: The texture changes the image’s appearance without replacing its original colors.
• Repeating texture image layers: Describe how the texture and primary image are sized and repeated in the example.
  Why it matters: The two backgrounds need different sizing and repetition to produce the intended overlay.
• Contrast mode texture choice: Describe the author’s rule of thumb for choosing among soft-light, hard-light, and overlay for textures, including its qualifications.
  Why it matters: This gives you a starting point for trying blend modes without treating one mode as universally best.

Key terms: texture, grayscale image, contrast blend modes, background size, background repeat, cover, tiled, soft-light, hard-light, overlay

13.3.4 Mix blend modes

This subsection explains how mix-blend-mode blends an entire element with content behind it, using a heading over an image as an example.

• Element versus background blending: Distinguish mix-blend-mode from background-blend-mode and explain what can be blended with each.
  Why it matters: The distinction explains why a heading can interact visually with an image behind it.
• Gray hard-light heading effect: Explain why the example’s gray heading appears transparent over the image and how its blend mode is applied.
  Why it matters: It accounts for the cut-out appearance rather than treating it as actual transparent text.
• Blend effect readability: Describe the readability concern with the blended heading and the measures used in the example.
  Why it matters: A striking blended effect still needs to leave its text legible.

Key terms: background-blend-mode, mix-blend-mode, hard-light, medium gray, contrast, legibility, low-contrast background image

13.4 Summary