web design | Scott Sutton dot net

Creating an animated text gradient with CSS

Jul 13, 2024

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

Jul 6, 2023

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

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>

This sounds about right

May 6, 2011

Creating an animated text gradient with CSS

Neon Glow Border

This sounds about right

Categories

Tags