feat(curriculum): Add interactive examples to linear and radial gradient (#62996)

Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉

curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc544196a17bf28594e64.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-linear-and-radial-gradients
 ---
 
-# --description--
+# --interactive--
 
 In a previous lesson, you learned how to start working with linear and radial gradients. In this lesson, we are going to dive deeper into how to work with the CSS properties to create more visually appealing and complex designs.
 
@@ -15,6 +15,13 @@ CSS supports two main types of gradients: linear gradients and radial gradients.
 
 Linear gradients create a gradual blend between colors along a straight line. You can control the direction of this line and the colors used. Here's a basic example of a linear gradient:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="linear-gradient"></div>
+```
+
 ```css
 .linear-gradient {
   background: linear-gradient(to right, red, blue);
@@ -22,10 +29,19 @@ Linear gradients create a gradual blend between colors along a straight line. Yo
 }
 ```
 
+:::
+
 This creates a gradient that transitions from red on the left to blue on the right. The `to right` parameter specifies the direction of the gradient. You can use other directions like `to left`, `to top`, `to bottom`, or even specify angles like `45deg`.
 
 You can also use multiple color stops in a linear gradient:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="multi-color-gradient"></div>
+```
+
 ```css
 .multi-color-gradient {
   background: linear-gradient(to right, red, yellow, blue);
@@ -33,10 +49,19 @@ You can also use multiple color stops in a linear gradient:
 }
 ```
 
+:::
+
 This creates a gradient that transitions from red to yellow to blue, evenly spaced across the element.
 
 Radial gradients, on the other hand, create circular or elliptical gradients that radiate from a central point. Here's an example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="radial-gradient"></div>
+```
+
 ```css
 .radial-gradient {
   background: radial-gradient(circle, red, blue);
@@ -44,8 +69,17 @@ Radial gradients, on the other hand, create circular or elliptical gradients tha
 }
 ```
 
+:::
+
 This creates a circular gradient that starts with red in the center and transitions to blue at the edges. You can also specify the shape and size of radial gradients:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="custom-radial-gradient"></div>
+```
+
 ```css
 .custom-radial-gradient {
   background: radial-gradient(ellipse at top left, red, blue);
@@ -53,8 +87,17 @@ This creates a circular gradient that starts with red in the center and transiti
 }
 ```
 
+:::
+
 This creates an elliptical gradient starting from the top left corner of the element. Both linear and radial gradients allow you to specify color stops at precise positions. For example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="precise-gradient"></div>
+```
+
 ```css
 .precise-gradient {
   background: linear-gradient(to right, red 20%, yellow 40%, blue 80%);
@@ -62,6 +105,8 @@ This creates an elliptical gradient starting from the top left corner of the ele
 }
 ```
 
+:::
+
 This creates a gradient where red takes up the first `20%`, then transitions to yellow at `40%`, and finally to blue at `80%`.
 
 Gradients can be used wherever you'd use an image in CSS. This makes them versatile for creating backgrounds, buttons, or even text effects when combined with other CSS properties.