From 63d186649d989fae62ef1788d221b6832584941f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Tue, 14 Oct 2025 21:47:42 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to background gradient lesson (#62815) --- .../672b98be592cfb451f651451.md | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md b/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md index acf672698b5..5c182884b03 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md +++ b/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 + +
+``` + ```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 + +
+``` + ```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.