Dynamic Border with Rainbow Effect

Written by @kerixa 27 August 2020

Try not to use simple elements in your web page. Instead make them dynamic and colorful. The following code provides a dynamic effect for borders. It makes them colorful and the colors change by time like a rainbow. Amazing

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300");
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}

.gradient-border {
  --border-width: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: var(--border-width);
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
</style>
<div class="gradient-border">We<br>are<br>Awesome</div><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300