title: Recreate a text effect by adding a class to every text element
body: <p>I want to have this beautiful text effect by adding a class to every text element:</p>
  <p><a href="https://i.stack.imgur.com/5oGPf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5oGPf.png" alt="enter image description here" /></a></p>
  <p>Here is the original code of the above image.</p>
  <p><a href="https://codepen.io/pixy-dixy/pen/GRNwmWv" rel="nofollow noreferrer">https://codepen.io/pixy-dixy/pen/GRNwmWv</a></p>
  <p>The issue with this code is he used attributes to create such a text effect but I want to use a simple class which can be added to any text element.</p>
  <p>I tried to create that class with no luck:</p>
  <p>Here is what I tried so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.effect {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-weight: 400;
    width: 100%;
    text-align: center;
    font-size: 5vw;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    z-index: 3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(-45deg, red 25%, white 25%, white 50%, red 50%, red 75.2%, white 75%, white);
    background-size: 10px 10px;
    background-position: 0 0;
    mix-blend-mode: overlay;
    font-variation-settings: "GLOW" 1000;
    filter: invert(0.7) grayscale(1);
    position: absolute;
    z-index: 2;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2), 2px 2px 1px rgba(255, 255, 255, 0.3), 1px 1px 1px rgba(138, 0, 0, 0.53), 1px 1px 1px white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="effect"&gt;candy&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there any solution to have a text element by adding a class?</p>