Degrades e efeito flutuando com ícones no CSS

Venho compartilhar algumas anotações que tenho para quem trabalha e utilize o CSS.

Degrade no texto:

Exemplo:

No CSS:

.degrade {
  background-image: linear-gradient(to bottom, #ff0077, #692c7e);
  color: black;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Degrade neon:

Exemplo:

No CSS:

h1 {
        text-align: center;
        color: white;
        animation: neon 2s infinite;
    }

    @keyframes neon {

        0%,
        39%,
        41%,
        59%,
        61%,
        100% {
            text-shadow:
                white 0 0 12px,
                #63084D 0 0 24px,
                #63084D 0 0 36px;
        }

        40%,
        60% {
            text-shadow: none;
        }
    }

Efeito ícone Flutuando:

Da para utilizar nos ícones de redes sociais...

Exemplo:

HTML:

<img class="logo" src="logo-instagram.png" alt="logo do insta">

CSS:

.logo {
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-25px);
        }

        100% {
            transform: translateY(0);
        }
    }

Caso isso seja útil, salve ai nas suas anotações TMJ!!!!! A Respeito do degrade, veja no meu porfólio como ficou bacana o design: https://leodkvt.com.br