diff --git a/blog_images/colors-mural.jpg b/blog_images/colors-mural.jpg
new file mode 100644
index 000000000..fc30cddd3
Binary files /dev/null and b/blog_images/colors-mural.jpg differ
diff --git a/blog_posts/25-css-gradients.md b/blog_posts/25-css-gradients.md
new file mode 100644
index 000000000..a6b5cc959
--- /dev/null
+++ b/blog_posts/25-css-gradients.md
@@ -0,0 +1,302 @@
+---
+title: 25 CSS gradients for you next project
+type: cheatsheet
+tags: css,visual
+authors: chalarangelo
+cover: blog_images/colors-mural.jpg
+excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!
+---
+
+[uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are our top picks in case you're looking for some color:
+
+<style>
+.gradient-box {
+  width: 100%;
+  height: 64px;
+  border-radius: 8px 8px 0 0;
+  margin-bottom: -16px;
+  margin-top: 32px;
+}
+
+.gradient-box + .gatsby-highlight > pre.blog-code {
+  border-radius: 0 0 8px 8px;
+}
+
+.stripe {
+  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
+}
+.flare {
+  background: linear-gradient(to right, #f12711, #f5af19);
+}
+.vanusa {
+  background: linear-gradient(to right, #da4453, #89216b);
+}
+.sublime-light {
+  background: linear-gradient(to right, #fc5c7d, #6a82fb);
+}
+.bighead {
+  background: linear-gradient(to right, #c94b4b, #4b134f);
+}
+.velvet-sun {
+  background: linear-gradient(to right, #e1eec3, #f05053);
+}
+.relay {
+  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
+}
+.crystal-clear {
+  background: linear-gradient(to right, #159957, #155799);
+}
+.celestial {
+  background: linear-gradient(to right, #c33764, #1d2671);
+}
+.ibiza-sunset {
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+}
+.fresh-turboscent {
+  background: linear-gradient(to right, #f1f2b5, #135058);
+}
+.cheer-up-emo-kid {
+  background: linear-gradient(to right, #556270, #ff6b6b);
+}
+.starfall {
+  background: linear-gradient(to right, #f0c27b, #4b1248);
+}
+.nelson {
+  background: linear-gradient(to right, #f2709c, #ff9472);
+}
+.forever-lost {
+  background: linear-gradient(to right, #5d4157, #a8caba);
+}
+.blurry-beach {
+  background: linear-gradient(to right, #d53369, #cbad6d);
+}
+.influenza {
+  background: linear-gradient(to right, #c04848, #480048);
+}
+.calm-darya {
+  background: linear-gradient(to right, #5f2c82, #49a09d);
+}
+.titanium {
+  background: linear-gradient(to right, #283048, #859398);
+}
+.pinky {
+  background: linear-gradient(to right, #dd5e89, #f7bb97);
+}
+.purple-paradise {
+  background: linear-gradient(to right, #1d2b64, #f8cdda);
+}
+.horizon {
+  background: linear-gradient(to right, #003973, #e5e5be);
+}
+.noon-to-dusk {
+  background: linear-gradient(to right, #ff6e7f, #bfe9ff);
+}
+.jshine {
+  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
+}
+.argon {
+  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
+}
+</style>
+
+<div class="gradient-box stripe"></div>
+
+```css
+.stripe {
+  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
+}
+```
+
+<div class="gradient-box flare"></div>
+
+```css
+.flare {
+  background: linear-gradient(to right, #f12711, #f5af19);
+}
+```
+
+<div class="gradient-box vanusa"></div>
+
+```css
+.vanusa {
+  background: linear-gradient(to right, #da4453, #89216b);
+}
+```
+
+<div class="gradient-box sublime-light"></div>
+
+```css
+.sublime-light {
+  background: linear-gradient(to right, #fc5c7d, #6a82fb);
+}
+```
+
+<div class="gradient-box bighead"></div>
+
+```css
+.bighead {
+  background: linear-gradient(to right, #c94b4b, #4b134f);
+}
+```
+
+<div class="gradient-box velvet-sun"></div>
+
+```css
+.velvet-sun {
+  background: linear-gradient(to right, #e1eec3, #f05053);
+}
+```
+
+<div class="gradient-box argon"></div>
+
+```css
+.argon {
+  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
+}
+```
+
+<div class="gradient-box celestial"></div>
+
+```css
+.celestial {
+  background: linear-gradient(to right, #c33764, #1d2671);
+}
+```
+
+<div class="gradient-box relay"></div>
+
+```css
+.relay {
+  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
+}
+```
+
+<div class="gradient-box crystal-clear"></div>
+
+```css
+.crystal-clear {
+  background: linear-gradient(to right, #159957, #155799);
+}
+```
+
+<div class="gradient-box ibiza-sunset"></div>
+
+```css
+.ibiza-sunset {
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+}
+```
+
+<div class="gradient-box fresh-turboscent"></div>
+
+```css
+.fresh-turboscent {
+  background: linear-gradient(to right, #f1f2b5, #135058);
+}
+```
+
+<div class="gradient-box cheer-up-emo-kid"></div>
+
+```css
+.cheer-up-emo-kid {
+  background: linear-gradient(to right, #556270, #ff6b6b);
+}
+```
+
+<div class="gradient-box starfall"></div>
+
+```css
+.starfall {
+  background: linear-gradient(to right, #f0c27b, #4b1248);
+}
+```
+
+<div class="gradient-box nelson"></div>
+
+```css
+.nelson {
+  background: linear-gradient(to right, #f2709c, #ff9472);
+}
+```
+
+<div class="gradient-box forever-lost"></div>
+
+```css
+.forever-lost {
+  background: linear-gradient(to right, #5d4157, #a8caba);
+}
+```
+
+<div class="gradient-box blurry-beach"></div>
+
+```css
+.blurry-beach {
+  background: linear-gradient(to right, #d53369, #cbad6d);
+}
+```
+
+<div class="gradient-box influenza"></div>
+
+```css
+.influenza {
+  background: linear-gradient(to right, #c04848, #480048);
+}
+```
+
+<div class="gradient-box jshine"></div>
+
+```css
+.jshine {
+  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
+}
+```
+
+<div class="gradient-box calm-darya"></div>
+
+```css
+.calm-darya {
+  background: linear-gradient(to right, #5f2c82, #49a09d);
+}
+```
+
+<div class="gradient-box titanium"></div>
+
+```css
+.titanium {
+  background: linear-gradient(to right, #283048, #859398);
+}
+```
+
+<div class="gradient-box pinky"></div>
+
+```css
+.pinky {
+  background: linear-gradient(to right, #dd5e89, #f7bb97);
+}
+```
+
+<div class="gradient-box purple-paradise"></div>
+
+```css
+.purple-paradise {
+  background: linear-gradient(to right, #1d2b64, #f8cdda);
+}
+```
+
+<div class="gradient-box horizon"></div>
+
+```css
+.horizon {
+  background: linear-gradient(to right, #003973, #e5e5be);
+}
+```
+
+<div class="gradient-box noon-to-dusk"></div>
+
+```css
+.noon-to-dusk {
+  background: linear-gradient(to right, #ff6e7f, #bfe9ff);
+}
+```
+
+**Image credit:** [Toa Heftiba](https://unsplash.com/@heftiba?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)