Rainbow links

Link https://twitter.com/chrisbiscardi/status/1259606045858467840
Note date 19 May, 2020
Tags css
👋 FYI, this note is over 6 months old. Some of the content may be out of date. 
.rainbow {
  background-image: linear-gradient(
    90deg,
    rgba(251, 89, 74, 1) 0%,
    rgba(251, 222, 75, 1) 25%,
    rgba(112, 228, 112, 1) 50%,
    rgba(51, 183, 255, 1) 75%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.46);
}

<a
style={{
backgroundImage: linear-gradient( 90deg, rgba(251, 89, 74, 1) 0%, rgba(251, 222, 75, 1) 25%, rgba(112, 228, 112, 1) 50%, rgba(51, 183, 255, 1) 75% ),
WebkitBackgroundClip: ‘text’,
WebkitTextFillColor: ‘rgba(255, 255, 255, 0.46)’,
}}

This is a rainbow link

With object-styles:

<a
  style={{
    backgroundImage: `linear-gradient(
    90deg,
    rgba(251, 89, 74, 1) 0%,
    rgba(251, 222, 75, 1) 25%,
    rgba(112, 228, 112, 1) 50%,
    rgba(51, 183, 255, 1) 75%
  )`,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'rgba(255, 255, 255, 0.46)',
  }}
>
  This is a rainbow link
</a>
← Back home