diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md
index 79b9479f8..1e567d215 100644
--- a/snippets/gradient-text.md
+++ b/snippets/gradient-text.md
@@ -7,7 +7,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
 
 Gives text a gradient color.
 
-- Use `background` with a `linear-gradient` value to give the text element a gradient background.
+- Use `background` with a `linear-gradient()` value to give the text element a gradient background.
 - Use `webkit-text-fill-color: transparent` to fill the text with a transparent color.
 - Use `webkit-background-clip: text` to clip the background with the text, filling the text with the gradient background as the color.
 
diff --git a/snippets/image-hover-rotate.md b/snippets/image-hover-rotate.md
index a834d7bd8..d1bbe6747 100644
--- a/snippets/image-hover-rotate.md
+++ b/snippets/image-hover-rotate.md
@@ -7,7 +7,7 @@ lastUpdated: 2021-10-11T18:44:51+03:00
 
 Creates a rotate effect for the image on hover.
 
-- Use the `scale`, `rotate` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
+- Use the `scale()`, `rotate()` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
 - Use `overflow: hidden` on the parent element to hide the excess from the image transformation.
 
 ```html
diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md
index 1f77fed32..8918593ff 100644
--- a/snippets/mouse-cursor-gradient-tracking.md
+++ b/snippets/mouse-cursor-gradient-tracking.md
@@ -9,7 +9,7 @@ A hover effect where the gradient follows the mouse cursor.
 
 - Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
 - Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
-- Use `background: radial-gradient(circle closest-side, pink, transparent);` to create the gradient at the correct position.
+- Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position.
 - Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
 - Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.
 
diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md
index c81bbada0..b4f02f5b1 100644
--- a/snippets/overflow-scroll-gradient.md
+++ b/snippets/overflow-scroll-gradient.md
@@ -7,7 +7,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00
 
 Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
 
-- Use the `:after` pseudo-element to create a `linear-gradient` that fades from `transparent` to `white` (top to bottom).
+- Use the `:after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
 - Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
 - Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
 
diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md
index e3d844031..bf20bcc5f 100644
--- a/snippets/rotating-card.md
+++ b/snippets/rotating-card.md
@@ -8,8 +8,8 @@ lastUpdated: 2021-03-30T15:24:01+03:00
 Creates a two sided card which rotates on hover.
 
 - Set the `backface-visibility` of the cards to none.
-- Initially, set `rotateY` for the back side of the card to `-180deg` and the front side to `0deg`.
-- Upon hover, set `rotateY` for the front side to `180deg` and backside to `0deg`.
+- Initially, set `rotateY()` for the back side of the card to `-180deg` and the front side to `0deg`.
+- Upon hover, set `rotateY()` for the front side to `180deg` and backside to `0deg`.
 - Set the appropriate `perspective` value to create the rotate effect.
 
 ```html
diff --git a/snippets/tile-layout-using-inline-block.md b/snippets/tile-layout-using-inline-block.md
index af2d8d10e..4667f0e1e 100644
--- a/snippets/tile-layout-using-inline-block.md
+++ b/snippets/tile-layout-using-inline-block.md
@@ -10,7 +10,7 @@ Aligns items horizontally using `display: inline-block` to create a 3-tile layou
 - Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.
 - Use `width` in combination with `calc` to divide the width of the container evenly into 3 columns.
 - Set `font-size` for `.tiles` to `0` to avoid whitespace and to `20px` for `<h2>` elements to display the text.
-- **Note:** If you use relative units (e.g. `em`), using `font-size: 0;` to fight whitespace between blocks might cause side effects.
+- **Note:** If you use relative units (e.g. `em`), using `font-size: 0` to fight whitespace between blocks might cause side effects.
 
 ```html
 <div class="tiles">