Added formal syntax to gradient functions (#13646)

files/en-us/web/css/gradient/conic-gradient()/index.md

@@ -117,6 +117,10 @@ background-size: 25% 25%;
 
 And, yes, you can mix and match different angle units, but don't. The above is hard to read.
 
+### Formal syntax
+
+{{csssyntax}}
+
 ## Accessibility concerns
 
 Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

files/en-us/web/css/gradient/linear-gradient()/index.md

@@ -117,6 +117,10 @@ linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
 
 By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.
 
+### Formal syntax
+
+{{csssyntax}}
+
 ## Examples
 
 ### Gradient at a 45-degree angle

files/en-us/web/css/gradient/radial-gradient()/index.md

@@ -73,6 +73,10 @@ To create a smooth gradient, the `radial-gradient()` function draws a series of
 
 Color-stop points are positioned on a _virtual gradient ray_ that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents `100%`. Each shape is a single color determined by the color on the gradient ray it intersects.
 
+### Formal syntax
+
+{{csssyntax}}
+
 ## Examples
 
 ### Simple gradient

files/en-us/web/css/gradient/repeating-conic-gradient()/index.md

@@ -99,6 +99,10 @@ If two or more color stops are at the same location, the transition will be a ha
 
 While you can mix and match different angle units, don't. It makes CSS hard to read.
 
+### Formal syntax
+
+{{csssyntax}}
+
 ## Accessibility concerns
 
 Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

files/en-us/web/css/gradient/repeating-linear-gradient()/index.md

@@ -66,17 +66,7 @@ repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
 
 ### Formal syntax
 
-```css
-repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-                            \---------------------------------/ \---------------/
-                              Definition of the gradient line   List of color stops
-
-where <side-or-corner> = [left | right] || [top | bottom]
-  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  and <linear-color-stop> = <color> [ <color-stop-length> ]?
-  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  and <color-hint> = [ <percentage> | <length> ]
-```
+{{csssyntax}}
 
 ## Examples
 

files/en-us/web/css/gradient/repeating-radial-gradient()/index.md

@@ -64,21 +64,7 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
 
 ### Formal syntax
 
-```css
-repeating-radial-gradient(
-       [[ circle  || <length> ]                     [at <position>]? , |
-        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
-        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
-                                                     at <position>   ,    <color-stop-list> )
-        \---------------------------------------------------------------/\-----------------/
-                  Contour, size and position of the ending shape          List of color stops
-
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-   and <linear-color-stop> = <color> [ <color-stop-length> ]?
-   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-   and <color-hint> = [ <percentage> | <length> ]
-```
+{{csssyntax}}
 
 ## Examples