Gradient Text Glow Effect in CSS

Gradient Text Glow Effect in CSS
Code Snippet:Cycling gradient glow - no text duplication
Author: Ana Tudor
Published: March 23, 2024
Last Updated: March 23, 2024
Downloads: 90
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a gradient text glow effect using CSS. It animates the text color smoothly. It helps add eye-catching text effects.

You can use this code on your website’s headings or banners to make text stand out. It adds visual appeal and draws attention to important information. This effect can enhance the overall design and user experience.

How to Create Gradient Text Glow Effect In Css

1. First of all, load the Prefixfree JS by adding the following CDN link into the head tag of your HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Inside the body tag of your HTML file, add an <h1> element with a class of “gr-text”. This will be the text element where the gradient glow effect will be applied. Copy the SVG code provided in the following example and paste it at the beginning of your HTML file. This SVG element contains the filter that generates the glow effect.

<svg width="0" height="0">
  <filter id="f" x="-50%" y="-200%" width="200%" height="500%" primitiveUnits="objectBoundingBox">
    <feGaussianBlur stdDeviation=".025 .2"></feGaussianBlur>
    <feColorMatrix type="saturate" values="1.3"></feColorMatrix>
    <feBlend in="SourceGraphic"></feBlend>
  </filter>
</svg>
<h1 class="gr-text">gradient text glow</h1>

3. In your linked CSS file, define the .gr-text class. This class contains the styles for the gradient text glow effect. Key properties include:

  • background: Creates a linear gradient background for the text.
  • background-clip: Sets the background to be clipped to the text.
  • color: Sets the text color to transparent.
  • filter: Applies the SVG filter for the glow effect.
  • animation: Animates the gradient transition.
@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
html, body {
  display: grid;
}

html {
  height: 100%;
}

body{
   background: #000;
   min-height: 720px;
}

svg[height="0"] {
  position: absolute;
}

.gr-text {
  /* no pseudo needed */
  --k: 0;
  place-self: center;
  background: linear-gradient(90deg, hsl(calc(var(--k)*1turn), 95%, 65%), hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 900 clamp(.875em, 7.25vw, 5em) arial black, sans-serif;
  filter: url(#f);
  text-align: center;
  text-transform: uppercase;
  /* needs support for animating custom properties */
  /* Firefox not quite there yet, but it's coming */
  animation: k 4s linear infinite;
}

@keyframes k {
  to {
    --k: 1 ;
  }
}

That’s all! hopefully, you have successfully created the Gradient Text Glow Effect on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X