add descriptions and shorten header

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
 <div class="shorter"></div>
 <div class="longer"></div>
 ```
@@ -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

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
 <div class="shorter">shorter hue</div>
 <div class="longer">longer hue</div>
 ```
@@ -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

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
 <div class="shorter"></div>
 <div class="longer"></div>
 ```
@@ -152,26 +152,28 @@ 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
   );
 }
 
 .longer {
   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

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
 <div class="shorter"></div>
 <div class="longer"></div>
 ```
@@ -189,26 +189,28 @@ 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
   );
 }
 
 .longer {
   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

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
 <div class="shorter">shorter hue</div>
 <div class="longer">longer hue</div>
 ```
@@ -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.

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
 <div class="shorter"></div>
 <div class="longer"></div>
 ```
@@ -148,26 +148,28 @@ 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
   );
 }
 
 .longer {
   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.