• Creating an animated text gradient with CSS

    This effect is ideal for creating an eye catching text heading and is quite simple to acheive with just a bit of CSS, or it could be used as a mouseover effect with a bit of a tweak to the code.

    You can view an example here

    The CSS

    .gradient-text{
         font-size: 3rem;
         font-weight: 700;
         text-align:center;
         background: linear-gradient(to right, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
         background-size: 200% 200%;
         animation: rainbow 4s ease-in-out infinite;
         background-clip: text;
         -webkit-background-clip:text;
         color:rgba(0,0,0,0);
    }
    @keyframes rainbow { 
         0%{background-position:left}
         50%{background-position:right}
         100%{background-position:left}
    }

    The HTML

    <div class="container">
         <p class="gradient-text">Animated text gradient with CSS</p>
    </div>
  • Neon Glow Border

    This is a nice little neon glow border style that can be used on elements in a page to draw attention and its not too much code involved. It can be tweaked in loads of different ways to give some real interesting designs.

    View the glowing neon border in action: https://scottsutton.net/additional-files/neon-border.html

    Box with glowing neon edge.

    The css:

    .gradient-border {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      width: 600px;
      min-height: 300px;
      color: white;
      padding: 1.8em;
      margin-top: 5em;
    }
    .gradient-border {
      --borderWidth: 2px;
      --borderRadius: 20px;
      background: var(--bg-color);
      position: relative;
      border-radius: var(--borderRadius);
    }
    .gradient-border:after {
      content: '';
      position: absolute;
      top: calc(-1 * var(--borderWidth));
      left: calc(-1 * var(--borderWidth));
      height: calc(100% + var(--borderWidth) * 2);
      width: calc(100% + var(--borderWidth) * 2);
      background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
      border-radius: var(--borderRadius);
      z-index: -1;
      animation: animatedgradient 3s ease alternate infinite;
      background-size: 300% 300%;
      filter: blur(10px);
    }
    @keyframes animatedgradient {
    	0% {
    		background-position: 0% 50%;
    	}
    	50% {
    		background-position: 100% 50%;
    	}
    	100% {
    		background-position: 0% 50%;
    	}
    }

    The html:

    <div class="gradient-border">
      <p>Box with glowing neon edge</p>
    </div>