TILs, snippets—my digital code garden 🌱.

All notes 11ty a11y ai animation api backend cheatsheet cli computer-science cpp css cypress deno dev devops git golang graphql html interview javascript messaging networking node performance php python questions react rust services sql storybook svelte sveltekit testing typescript typography vscode

Rainbow links

https://twitter.com/chrisbiscardi/status/1259606045858467840
css 
.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>