diff --git a/src/resources/css/typography/text-gradient.css b/src/resources/css/typography/text-gradient.css
new file mode 100644
index 0000000..3faeacb
--- /dev/null
+++ b/src/resources/css/typography/text-gradient.css
@@ -0,0 +1,45 @@
+.text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    z-index: 1;
+}
+
+.text-gradient.text-primary {
+    background-image: linear-gradient(310deg, var(--primary-text-color-gradient-start), var(--primary-text-color-gradient-end));
+}
+.text-primary {
+    color: var(--primary-text-color);
+}
+
+.text-gradient.text-info {
+    background-image: linear-gradient(310deg, var(--text-info-color-gradient-start), var(--text-info-color-gradient-end));
+}
+.text-info {
+    color: var(--text-info-color);
+}
+
+.text-gradient.text-success {
+    background-image: linear-gradient(310deg, var(--text-success-color-gradient-start), var(--text-success-color-gradient-end));
+    color: hsl(86, 81.4%, 46.3%);
+}
+.text-success {
+    color: var(--text-success-color);
+}
+
+.text-gradient.text-warning {
+    background-image: linear-gradient(310deg, var(--text-warning-color-gradient-start), var(--text-warning-color-gradient-end));
+    color: hsl(47, 96.2%, 59.2%);
+}
+.text-warning {
+    color: var(--text-warning-color);
+}
+
+.text-gradient.text-danger {
+    background-image: linear-gradient(310deg, var(--text-danger-color-gradient-start), var(--text-danger-color-gradient-end));
+    color: hsl(0, 95%, 47.1%);
+}
+.text-danger {
+    color: var(--text-danger-color);
+}