diff --git a/README.md b/README.md
index 1bfa71761..3367650fc 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ See CONTRIBUTING.md for the snippet template.
 * [`Counter`](#counter)
 * [`Custom scrollbar`](#custom-scrollbar)
 * [`Custom text selection`](#custom-text-selection)
+* [`Drop cap`](#drop-cap)
 * [`Dynamic shadow`](#dynamic-shadow)
 * [`Etched text`](#etched-text)
 * [`Focus Within`](#focus-within)
@@ -1581,6 +1582,41 @@ in any specification.</span>
 
 <br>[⬆ Back to top](#contents)
 
+### Drop cap
+
+Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.
+
+```html
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>
+<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>
+```
+
+```css
+p:first-child::first-letter {
+  color: #5f79ff;
+  float: left;
+  margin: 0 8px 0 4px;
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 1;
+}
+```
+
+
+#### Explanation
+
+
+- Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph.
+
+
+#### Browser support
+
+100.0%
+
+- https://caniuse.com/#feat=first-letter
+
+<br>[⬆ Back to top](#contents)
+
 ### Dynamic shadow
 
 Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 78e4c946d..2b7221c6c 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -212,6 +212,21 @@
         "hash": "4e7f5ce479955deb9830ca4a72fc8260c8863aa65d6f67f15e88a3f923c10c3a"
       }
     },
+    {
+      "id": "drop-cap",
+      "type": "snippetListing",
+      "title": "Drop cap",
+      "attributes": {
+        "text": "Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.\n\n",
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "e7859bc139713ffe59a05904f6175e9578ad111ebe3405d58599846c44801606"
+      }
+    },
     {
       "id": "dynamic-shadow",
       "type": "snippetListing",
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index beb2c8f74..33e31b254 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -392,6 +392,33 @@
         "hash": "4e7f5ce479955deb9830ca4a72fc8260c8863aa65d6f67f15e88a3f923c10c3a"
       }
     },
+    {
+      "id": "drop-cap",
+      "title": "Drop cap",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "drop-cap.md",
+        "text": "Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.\n\n",
+        "explanation": "\n\n- Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph.\n\n",
+        "browserSupport": {
+          "text": "\n\n- https://caniuse.com/#feat=first-letter\n",
+          "supportPercentage": 100
+        },
+        "codeBlocks": {
+          "html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>\n<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>",
+          "css": "p:first-child::first-letter {\n  color: #5f79ff;\n  float: left;\n  margin: 0 8px 0 4px;\n  font-size: 3rem;\n  font-weight: bold;\n  line-height: 1;\n}",
+          "js": "",
+          "scopedCss": "[data-scope=\"drop-cap\"] p:first-child::first-letter {\n  color: #5f79ff;\n  float: left;\n  margin: 0 8px 0 4px;\n  font-size: 3rem;\n  font-weight: bold;\n  line-height: 1; }\n"
+        },
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "e7859bc139713ffe59a05904f6175e9578ad111ebe3405d58599846c44801606"
+      }
+    },
     {
       "id": "dynamic-shadow",
       "title": "Dynamic shadow",