CSS based text effects to apply on a web

Basic text formatting is very simple. It's just a few CSS properties that control the font-size, color, letter spacing...

p {
  color: transparent;
  font-size: <size>;
  font-weight: <weight>;
  font-style: <style>;
  letter-spacing: <spacing>;
  text-decoration: <decoration>;
}

Pretty neat, but I'm going to focus on a cooler text-effect that can be created using only modern CSS. It looks like this:

CSS Power

I've added a CSS property that sets the text color to match the background instead of that of color. It may not feel like a big difference, but it is. Keep in mind that now we have a lot of CSS options that were not available before. For one, gradients!

Always Ready

The CSS required for this is not standarized yet, and uses a prefix, but is implemented by all major browsers. Check Can I Use for more details on browser compatibility. Below is what the CSS looks like:

p {
  color: transparent;
  background: <custom-background>; // Get creative here!
  -webkit-background-clip: text;
}

The key to get this effect, is the -webkit-background-clip property. It's the one that sets the text color to match the value of background. If you are on desktop, hover over the text below to see something neat.

I change on hover

And that's it, a simple trick for enhancing text decoration.

More concepts