https://juhanakristianblog.netlify.app/tags/open-source/ Recent content in Open Source on dev notes Hugo en-us Mon, 09 Nov 2020 00:00:00 +0000 https://juhanakristianblog.netlify.app/posts/tailwind-plugin-for-gradient-mask/ Mon, 09 Nov 2020 00:00:00 +0000 https://juhanakristianblog.netlify.app/posts/tailwind-plugin-for-gradient-mask/ <p>Some time ago I added excerpts to my blog. A small sample of the full blog text is now shown on the front page after the post heading, date, and tags. To make the excerpts look a bit nicer, I wanted to add an effect that makes the text fade into the background.</p> <p>You can do this with the CSS mask-image property by setting its value to a linear-gradient.</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">some-class</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">mask-image</span>: linear-gradient(<span style="color:#66d9ef">to</span> <span style="color:#66d9ef">top</span>, rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">1.0</span>) <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#66d9ef">transparent</span> <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>I use Tailwind CSS to style my blog so I wanted to find a solution which doesn&rsquo;t require adding CSS classes or files to my project.</p>