Se você está buscando adicionar um toque de charme às suas interfaces, que tal dar vida às bordas dos seus elementos com animações de gradientes? Neste artigo, vou mostrar como criar bordas animadas usando CSS puro, uma técnica que combina a elegância dos gradientes com a fluidez das animações, trazendo um aspecto moderno e dinâmico para seus projetos. Esse truque é perfeito para quem quer seguir a linha visual de ferramentas que estão integrando recursos de IA e interfaces mais interativas.

A Estrutura Básica

Para começar, precisamos de uma estrutura HTML simples. Vamos criar duas caixas (divs) que serão os nossos alvos para as animações. Cada caixa terá um texto que descreve o tipo de gradiente aplicado:

<div class="wrapper">
    <div class="box">
        <p>Gradiente Cônico</p>
    </div>

    <div class="box">
        <p>Gradiente Radial</p>
    </div>
</div>

Aqui, temos duas divs dentro de uma wrapper, cada uma exibindo um tipo diferente de borda animada. Agora, vamos à mágica no CSS.

A Magia do CSS

Vamos começar importando uma fonte bacana e aplicando alguns resets básicos:

@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
    box-sizing: border-box;
}

Esse trecho garante que as bordas e os paddings sejam considerados na largura e altura dos elementos, evitando surpresas desagradáveis.

Definindo Propriedades Personalizadas

Para criar as animações, utilizaremos propriedades CSS personalizadas que nos permitirão animar os gradientes com fluidez:

@property --angle {
    syntax: "<angle>";
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

Essas propriedades serão animadas dentro das keyframes, controlando a rotação do gradiente cônico e as posições do gradiente radial.

Estilizando o Corpo e Configurando Variáveis Globais

No body, aplicamos a fonte Raleway e centralizamos o conteúdo da página usando flexbox:

body {
    font-family: Raleway, sans-serif;
    text-align: center;
    margin: 0;
    padding: 1rem;
    background-color: rgba(10, 12, 18, 1);
    color: white;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

Agora, definimos algumas variáveis CSS globais:

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: rgba(168, 239, 255, 1);
    --c2: rgba(168, 239, 255, 0.1);
}

Essas variáveis controlam a duração das animações, as cores dos gradientes, e as posições iniciais dos gradientes.

Criando as Bordas Animadas

Cada caixa (.box) terá uma borda animada. A primeira utilizará um conic-gradient:

.box {
    font-size: 3vw;
    margin: max(1rem, 3vw);
    border: 0.35rem solid;
    padding: 3vw;
    border-image: conic-gradient(
            from var(--angle),
            var(--c2),
            var(--c1) 0.1turn,
            var(--c1) 0.15turn,
            var(--c2) 0.25turn
        )
        30;
    animation: borderRotate var(--d) linear infinite forwards;
}

O border-image utiliza um conic-gradient que rotaciona conforme a animação progride. A segunda caixa, por outro lado, usa um radial-gradient:

.box:nth-child(2) {
    border-image: radial-gradient(
            ellipse at var(--gradX) var(--gradY),
            var(--c1),
            var(--c1) 10%,
            var(--c2) 40%
        )
        30;
    animation: borderRadial var(--d) linear infinite forwards;
}

Aqui, o gradiente radial é animado para mudar de posição, criando uma transição suave e contínua ao longo das bordas.

Definindo as Animações

Vamos animar essas bordas utilizando keyframes:

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }
    40% {
        --gradX: 100%;
        --gradY: 100%;
    }
    60% {
        --gradX: 50%;
        --gradY: 100%;
    }
    80% {
        --gradX: 0%;
        --gradY: 50%;
    }
    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}

• borderRotate: Gira o gradiente cônico de 90deg até 420deg para criar uma rotação contínua.
• borderRadial: Move o centro do gradiente radial ao longo da borda, gerando um efeito visual dinâmico e envolvente.

Conclusão

Com esse pequeno truque de CSS, você pode transformar elementos simples em componentes visuais sofisticados e animados. Esses efeitos são ideais para destacar partes importantes de uma interface ou para adicionar um toque de modernidade que remete às tendências visuais de ferramentas que integram IA.

O resultado final fica um tanto impressionante, dependendo da forma como você aplicar esta técnica em seu projeto poderá dar um grande charme a sua UI. Confira o resultado:

Espero que essa dica ajude você a deixar suas interfaces ainda mais vivas e charmosas! Se você gostou, não esqueça de compartilhar suas criações comigo. Vamos juntos continuar explorando o potencial infinito do CSS!