Skip to footer navigation.

« Oatmeal

For those times you need a little rainbow

.rainbow {
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
}

When applied to text, this class changes text’s color from whatever it is by default to a rainbow 🌈.

It is an interesting bit of css because it achieves this by essentially turning the text into a knockout overlay on top of an embedded background image (the rainbow gradient). The text itself is transparent, allowing the background beneath (behind) to show through. This is all achieved without needing to convert the text to svg, or use some weird font. Straight up css 🦄.

Published

Tags