diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md
index 8dfeb2f47f4c02f..547f56923ef536b 100644
--- a/files/en-us/web/css/gradient/conic-gradient/index.md
+++ b/files/en-us/web/css/gradient/conic-gradient/index.md
@@ -219,9 +219,9 @@ div {
{{EmbedLiveSample("Checkerboard", 120, 120)}}
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
```
@@ -247,16 +247,20 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
- background-image: conic-gradient(in hsl shorter hue, red, blue, green, red);
+ background-image: conic-gradient(in hsl shorter hue, red, blue);
}
.longer {
- background-image: conic-gradient(in hsl longer hue, red, blue, green, red);
+ background-image: conic-gradient(in hsl longer hue, red, blue);
}
```
+The box on the left uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the right uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
### More conic-gradient examples
diff --git a/files/en-us/web/css/gradient/linear-gradient/index.md b/files/en-us/web/css/gradient/linear-gradient/index.md
index a974a8e34c430c6..b1b3cc8e448547d 100644
--- a/files/en-us/web/css/gradient/linear-gradient/index.md
+++ b/files/en-us/web/css/gradient/linear-gradient/index.md
@@ -174,9 +174,9 @@ body {
{{EmbedLiveSample("Interpolation in rectangular color space", 120, 120)}}
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
shorter hue
longer hue
```
@@ -189,16 +189,20 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
- background: linear-gradient(90deg in hsl shorter hue, blue, red);
+ background: linear-gradient(90deg in hsl shorter hue, red, blue);
}
.longer {
- background: linear-gradient(90deg in hsl longer hue, blue, red);
+ background: linear-gradient(90deg in hsl longer hue, red, blue);
}
```
+The box on the top uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the bottom uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample("Interpolation in polor color space with hue interpolation methods", 120, 120)}}
### Gradient with multi-position color-stops
diff --git a/files/en-us/web/css/gradient/radial-gradient/index.md b/files/en-us/web/css/gradient/radial-gradient/index.md
index ac08665298045df..f0a8c0c40564bcc 100644
--- a/files/en-us/web/css/gradient/radial-gradient/index.md
+++ b/files/en-us/web/css/gradient/radial-gradient/index.md
@@ -124,9 +124,9 @@ Color-stop points are positioned on a _virtual gradient ray_ that extends horizo
{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
```
@@ -152,13 +152,14 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
background-image: radial-gradient(
circle at center in hsl shorter hue,
red,
- blue,
- green
+ blue
);
}
@@ -166,12 +167,13 @@ div {
background-image: radial-gradient(
circle at center in hsl longer hue,
red,
- blue,
- green
+ blue
);
}
```
+The box on the left uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the right uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
### More radial-gradient examples
diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
index 7dc5fb9f78d56e8..56ce5990a262f04 100644
--- a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
+++ b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
@@ -161,9 +161,9 @@ div {
{{EmbedLiveSample("Off-centered_gradient", 220, 220)}}
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
```
@@ -189,13 +189,14 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
background-image: repeating-conic-gradient(
in hsl shorter hue,
red,
- blue 90deg,
- green 180deg
+ blue 180deg
);
}
@@ -203,12 +204,13 @@ div {
background-image: repeating-conic-gradient(
in hsl longer hue,
red,
- blue 90deg,
- green 180deg
+ blue 180deg
);
}
```
+The box on the left uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the right uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
### More repeating-conic-gradient examples
diff --git a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
index c887db80f824aee..aef9264f5e6419f 100644
--- a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
+++ b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
@@ -142,9 +142,9 @@ body {
{{EmbedLiveSample("Interpolation in rectangular color space", 120, 120)}}
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
shorter hue
longer hue
```
@@ -158,24 +158,28 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
background: repeating-linear-gradient(
90deg in hsl shorter hue,
- blue,
- red 100px
+ red,
+ blue 300px
);
}
.longer {
background: repeating-linear-gradient(
90deg in hsl longer hue,
- blue,
- red 100px
+ red,
+ blue 300px
);
}
```
+The box on the top uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the bottom uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample("Interpolation in polor color space with hue interpolation methods", 120, 120)}}
> **Note:** Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples.
diff --git a/files/en-us/web/css/gradient/repeating-radial-gradient/index.md b/files/en-us/web/css/gradient/repeating-radial-gradient/index.md
index 9d05dd7986f4895..ef7e42a40db6214 100644
--- a/files/en-us/web/css/gradient/repeating-radial-gradient/index.md
+++ b/files/en-us/web/css/gradient/repeating-radial-gradient/index.md
@@ -120,9 +120,9 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)
The elliptical gradient will be centered 20% from the top left, and will repeat 10 times between the center and the farthest corner (the bottom right corner). Browsers supporting multi position color stops will display a red and green striped ellipse. Browsers not supporting the syntax yet will see a gradient that goes from red to black and then from blue to green.
-### Interpolation in polor color space with hue interpolation methods
+### Interpolation with hue interpolation methods
-```html
+```html hidden
```
@@ -148,13 +148,14 @@ div {
}
```
+In this example for interpolation hsl color system is being used and hue is being interpolated.
+
```css
.shorter {
background-image: repeating-radial-gradient(
circle at center in hsl shorter hue,
red 30px,
- blue 60px,
- green 90px
+ blue 60px
);
}
@@ -162,12 +163,13 @@ div {
background-image: repeating-radial-gradient(
circle at center in hsl longer hue,
red 30px,
- blue 60px,
- green 90px
+ blue 60px
);
}
```
+The box on the left uses [shorter interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#shorter) so color goes straight from red to blue taking short arc on [color wheel](/en-US/docs/Glossary/Color_wheel). And the box on the right uses [longer interpolation](/en-US/docs/Web/CSS/hue-interpolation-method#longer) so the color goes from red to blue via green taking longer arc.
+
{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
> **Note:** Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples.