Tag Archives: gradients

Animating a CSS Gradient Border

Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS.

Curious to see what we can do with them, I whipped up a few demos using CodePen.

~

The most simple usage is to set some type of CSS gradient as the border-image:

div {
    border: 3em solid;
    border-image: linear-gradient(to right, green, yellow) 1;
}

See the Pen CSS Gradient Border by Bramus (@bramus) on CodePen.

Then I wondered if I could animate the border, so that it would rotate along the edge.

~

To animate the border gradient you’ll need to add an angle in there — using a Custom Property — which you animate using some @keyframes.

div {
  --angle: 0deg;
  /* … */
  border-image: linear-gradient(var(--angle), green, yellow) 1;
  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

By using a Custom Property we can have the browser properly automatically interpolate this value from 0deg to 360deg instead of needing to add individual keyframes for every 1 degree increase. For this to work we have to register the Custom Property using the amazing @property at-rule

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

⚠️ As @property is only supported in Chromium, the demos from here on down will only work in browsers based upon it. For browsers that don’t support it we could add individual keyframes for each step, but for demonstration purposes I’m skipping out on that here.

See the Pen CSS Gradient Border (Animated) by Bramus (@bramus) on CodePen.

~

While the effect here looks quite nice it won’t play nice with more than two colors. Take this rainbow animated gradient border for example:

See the Pen CSS Rainbow Gradient Border (Animated, Attempt 1) by Bramus (@bramus) on CodePen.

🕵️‍♂️ You can see best what’s going on by toggling the fill option there … ugh, that’s not what we want!

To fix that I first thought of using a radial gradient but what I need is a conic gradient:

This way each color of the gradient will extend nicely into the border, resulting in a correct animation.

div {
    /* … */
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
}

💁‍♂️ To make the end of the gradient blend nicely into its begin color, we have to repeat the said color — e.g. red — as the last entry.

See the Pen CSS Rainbow Gradient Border (Animated) by Bramus (@bramus) on CodePen.

When toggling the fill you can see that border-image here stretches out the color perpendicular to its edge, instead of letting the gradient “pass”. This might not be 100% what you want, but for me it was exactly what I aimed for 🙂

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

The result looks like this:

Uses the aforementioned box-decoration-break to span styles across multiple lines along with text-decoration-color to tweak the color of the line below the link.

.gradient-text {
  background: linear-gradient(120deg, #ab4e19, #c99a2e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  text-decoration-color: #ab4e19;
}

Multi-line gradient links →

Grade.js

gradejs

This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.

Apply the Grade function to elements wrapping the source images:

<script src="path/to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function(){
        Grade(document.querySelectorAll('.gradient-wrap'))
    })
</script>

…

<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>

Installation possible with npm:

npm install grade-js

Grade.js →
Grade Source (GitHub) →