diff --git a/README.md b/README.md
index 978441c..6910e51 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ A collection of tips to help take your CSS skills pro.
 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events)
 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing)
 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements)
+1. [Add a `gradient color` to text](#add-a-gradient-color-to-text)
 
 
 ### Use a CSS Reset
@@ -638,6 +639,27 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei
 <sup>[back to table of contents](#table-of-contents)</sup>
 
 
+
+### Add a `gradient color` to text
+
+Multiple colors can be added to a text in form of a gradient with the use of `background`, `-webkit-background-clip` and `-webkit-text-fill-color`.
+
+**Note:** It is important to note that the gradient effect is seen only when a minimum of two colors are used. You can add as many colors as you like.
+
+```css
+.gradient-text {
+   background: -webkit-linear-gradient(45deg, #112b8a, #ff0000);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+```
+
+#### [Demo](https://codepen.io/Toyinn/pen/abJvXdo)
+
+<sup>[back to table of contents](#table-of-contents)</sup>
+
+
+
 ## Support
 
 Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.