feat(curriculum): Add interactive examples to background gradient lesson (#62815)

curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-a-background-gradient
 ---
 
-# --description--
+# --interactive--
 
 A background gradient in CSS is a smooth transition between two or more colors that can be applied to the background of an element. Gradients allow you to create visually appealing backgrounds without needing images.
 
@@ -27,6 +27,13 @@ The direction specifies the direction of the gradient. It can be an angle (such
 
 To better understand how linear gradients work, let's take a look at the following example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="linear-gradient"></div>
+```
+
 ```css
 .linear-gradient{
   background: linear-gradient(to right, red, yellow);
@@ -34,6 +41,8 @@ To better understand how linear gradients work, let's take a look at the followi
 }
 ```
 
+:::
+
 This CSS creates a linear gradient that transitions from `red` on the `left` to `yellow` on the `right`. The gradient is applied to an element with a height of `40%` of the viewport height. You'll learn more about `vh` units in a future lesson.
 
 The `to right` direction means the gradient runs horizontally from left to right.
@@ -58,6 +67,13 @@ Lastly, color stops are a list of colors that the gradient transitions through.
 
 An example would be:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="radial-gradient"></div>
+```
+
 ```css
 .radial-gradient{
   background: radial-gradient(circle closest-side at center, red, yellow 50%, green);
@@ -65,6 +81,8 @@ An example would be:
 }
 ```
 
+:::
+
 This CSS creates a circular radial gradient centered in the element. It starts with `red` at the center, transitions to `yellow` at `50%` of the radius, and ends with `green`.
 
 The `closest-side` keyword makes the gradient's ending shape fit the closest side of the element. The gradient is applied to an element with a height of `60%` of the viewport height.