CSS • Chapter 22 • Foundations to Production
Gradients
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
22.1 linear-gradient
linear-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For linear-gradient in Chapter 22, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for linear-gradient, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 22, topic 1.
Concept in plain language
linear-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal pricing table for linear-gradient. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 22, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the lesson sidebar example for linear-gradient. Predict the visual difference before reloading the page. Chapter 22, topic 1, example 2.
Example 3: Narrow-screen test
Test linear-gradient in the contact form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 22, topic 1, example 3.
Example 4: Translated-text test
Translate the button group into a language with longer labels while using linear-gradient. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 22, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the data table to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 22, topic 1, example 5.
Example 6: Accessibility test
Check linear-gradient in the media player with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 22, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the notification and determine why the declaration for linear-gradient wins or loses using the browser's Styles and Computed panels. Chapter 22, topic 1, example 7.
Example 8: Content-stress test
Fill the language selector with very long words, URLs, translated text, images, and nested controls. Adjust linear-gradient without hiding meaningful content. Chapter 22, topic 1, example 8.
Example 9: Refactoring test
Rewrite the course card so linear-gradient uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 22, topic 1, example 9.
Example 10: Production review
Review linear-gradient in the navigation bar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 22, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="visual-box">Visual example</div>
<style>
.visual-box{background:linear-gradient(135deg,#6d28d9,#0f766e);min-height:8rem;padding:1rem}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate linear-gradient.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The background declaration demonstrates linear-gradient.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates linear-gradient without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 22, topic 1.
Practice exercise
Build a fresh example for linear-gradient from Chapter 22. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
22.2 radial-gradient
radial-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For radial-gradient in Chapter 22, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for radial-gradient, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 22, topic 2.
Concept in plain language
radial-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal button group for radial-gradient. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 22, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the data table example for radial-gradient. Predict the visual difference before reloading the page. Chapter 22, topic 2, example 2.
Example 3: Narrow-screen test
Test radial-gradient in the media player at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 22, topic 2, example 3.
Example 4: Translated-text test
Translate the notification into a language with longer labels while using radial-gradient. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 22, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the language selector to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 22, topic 2, example 5.
Example 6: Accessibility test
Check radial-gradient in the course card with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 22, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the navigation bar and determine why the declaration for radial-gradient wins or loses using the browser's Styles and Computed panels. Chapter 22, topic 2, example 7.
Example 8: Content-stress test
Fill the article with very long words, URLs, translated text, images, and nested controls. Adjust radial-gradient without hiding meaningful content. Chapter 22, topic 2, example 8.
Example 9: Refactoring test
Rewrite the profile panel so radial-gradient uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 22, topic 2, example 9.
Example 10: Production review
Review radial-gradient in the search form for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 22, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="visual-box">Visual example</div>
<style>
.visual-box{background:radial-gradient(circle,#fff,#c4b5fd);min-height:8rem;padding:1rem}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate radial-gradient.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The background declaration demonstrates radial-gradient.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates radial-gradient without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 22, topic 2.
Practice exercise
Build a fresh example for radial-gradient from Chapter 22. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
22.3 conic-gradient
conic-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For conic-gradient in Chapter 22, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for conic-gradient, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 22, topic 3.
Concept in plain language
conic-gradient is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal notification for conic-gradient. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 22, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the language selector example for conic-gradient. Predict the visual difference before reloading the page. Chapter 22, topic 3, example 2.
Example 3: Narrow-screen test
Test conic-gradient in the course card at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 22, topic 3, example 3.
Example 4: Translated-text test
Translate the navigation bar into a language with longer labels while using conic-gradient. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 22, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the article to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 22, topic 3, example 5.
Example 6: Accessibility test
Check conic-gradient in the profile panel with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 22, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the search form and determine why the declaration for conic-gradient wins or loses using the browser's Styles and Computed panels. Chapter 22, topic 3, example 7.
Example 8: Content-stress test
Fill the dashboard with very long words, URLs, translated text, images, and nested controls. Adjust conic-gradient without hiding meaningful content. Chapter 22, topic 3, example 8.
Example 9: Refactoring test
Rewrite the photo gallery so conic-gradient uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 22, topic 3, example 9.
Example 10: Production review
Review conic-gradient in the pricing table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 22, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="visual-box">Visual example</div>
<style>
.visual-box{background:conic-gradient(#6d28d9,#0f766e,#6d28d9);min-height:8rem;padding:1rem}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate conic-gradient.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The background declaration demonstrates conic-gradient.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates conic-gradient without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 22, topic 3.
Practice exercise
Build a fresh example for conic-gradient from Chapter 22. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
22.4 Repeating Gradients
Repeating Gradients is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Repeating Gradients in Chapter 22, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Repeating Gradients, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 22, topic 4.
Concept in plain language
Repeating Gradients is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal navigation bar for Repeating Gradients. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 22, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the article example for Repeating Gradients. Predict the visual difference before reloading the page. Chapter 22, topic 4, example 2.
Example 3: Narrow-screen test
Test Repeating Gradients in the profile panel at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 22, topic 4, example 3.
Example 4: Translated-text test
Translate the search form into a language with longer labels while using Repeating Gradients. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 22, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the dashboard to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 22, topic 4, example 5.
Example 6: Accessibility test
Check Repeating Gradients in the photo gallery with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 22, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the pricing table and determine why the declaration for Repeating Gradients wins or loses using the browser's Styles and Computed panels. Chapter 22, topic 4, example 7.
Example 8: Content-stress test
Fill the lesson sidebar with very long words, URLs, translated text, images, and nested controls. Adjust Repeating Gradients without hiding meaningful content. Chapter 22, topic 4, example 8.
Example 9: Refactoring test
Rewrite the contact form so Repeating Gradients uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 22, topic 4, example 9.
Example 10: Production review
Review Repeating Gradients in the button group for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 22, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<style>
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Repeating Gradients.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- repeat() reduces duplication in repeated track definitions.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Repeating Gradients without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 22, topic 4.
Practice exercise
Build a fresh example for Repeating Gradients from Chapter 22. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
22.5 Layered Gradients
Layered Gradients is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Layered Gradients in Chapter 22, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Layered Gradients, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 22, topic 5.
Concept in plain language
Layered Gradients is part of the CSS system covered in Chapter 22. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal search form for Layered Gradients. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 22, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the dashboard example for Layered Gradients. Predict the visual difference before reloading the page. Chapter 22, topic 5, example 2.
Example 3: Narrow-screen test
Test Layered Gradients in the photo gallery at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 22, topic 5, example 3.
Example 4: Translated-text test
Translate the pricing table into a language with longer labels while using Layered Gradients. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 22, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the lesson sidebar to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 22, topic 5, example 5.
Example 6: Accessibility test
Check Layered Gradients in the contact form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 22, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the button group and determine why the declaration for Layered Gradients wins or loses using the browser's Styles and Computed panels. Chapter 22, topic 5, example 7.
Example 8: Content-stress test
Fill the data table with very long words, URLs, translated text, images, and nested controls. Adjust Layered Gradients without hiding meaningful content. Chapter 22, topic 5, example 8.
Example 9: Refactoring test
Rewrite the media player so Layered Gradients uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 22, topic 5, example 9.
Example 10: Production review
Review Layered Gradients in the notification for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 22, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="visual-box">Visual example</div>
<style>
.visual-box{background:linear-gradient(#fff8,#fff8),linear-gradient(135deg,#6d28d9,#0f766e);min-height:8rem;padding:1rem}
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Layered Gradients.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- The background declaration demonstrates Layered Gradients.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Layered Gradients without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 22, topic 5.
Practice exercise
Build a fresh example for Layered Gradients from Chapter 22. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 22 review — 10 questions and answers
1. What should you inspect first when linear-gradient does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for linear-gradient. Then reduce the example until the winning declaration is clear.
2. How should linear-gradient be checked before publishing?
Answer: Test linear-gradient on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when radial-gradient does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for radial-gradient. Then reduce the example until the winning declaration is clear.
4. How should radial-gradient be checked before publishing?
Answer: Test radial-gradient on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when conic-gradient does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for conic-gradient. Then reduce the example until the winning declaration is clear.
6. How should conic-gradient be checked before publishing?
Answer: Test conic-gradient on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when Repeating Gradients does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Repeating Gradients. Then reduce the example until the winning declaration is clear.
8. How should Repeating Gradients be checked before publishing?
Answer: Test Repeating Gradients on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when Layered Gradients does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Layered Gradients. Then reduce the example until the winning declaration is clear.
10. How should Layered Gradients be checked before publishing?
Answer: Test Layered Gradients on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.