Como usar gradientes CSS para fundos no Shopify e GemPages

O que é um gradiente CSS?

A Gradiente CSS é um estilo de fundo que transita entre duas ou mais cores. Ao contrário das imagens tradicionais, os gradientes são criados com código, o que os torna escaláveis, leves e facilmente personalizáveis.

Existem três tipos principais de gradientes CSS:

• Gradientes lineares: Transição de cores ao longo de uma linha reta (por exemplo, de cima para baixo ou da esquerda para a direita).
  Exemplo: gradiente linear (vermelho, verde)
• Gradientes radiais:As cores irradiam para fora a partir de um ponto central.
  Exemplo: gradiente radial (círculo, azul, branco)
• Gradientes cônicos: As cores são giradas em torno de um ponto central, como um gráfico de pizza.
  Exemplo: gradiente cônico (de 90 graus, vermelho, amarelo, verde)

Geradores de gradiente CSS recomendados

Essas ferramentas gratuitas tornam tudo mais fácil:

• Gradiente CSS – Interface amigável para gradientes lineares e radiais
• uiGradientes– Predefinições bonitas e prontas para uso
• Gerador de gradiente Coolors – Ideal para paletas de marcas
• Caça ao Gradiente – Gradientes selecionados pela comunidade

Esses geradores oferecem visualizações prévias e permitem que você copie o CSS com um único clique.

Como configurar um fundo gradiente no Shopify

Os temas do Shopify agora permitem que você adicione gradientes diretamente do Editor de temasVeja como fazer isso usando CSS personalizado:

Passo 1: Acesse Loja online > Temas no seu administrador do Shopify.

Passo 2: Clique Personalizar ao lado do tema que você deseja editar.

Etapa 3: Clique no Configurações (ícone de engrenagem) e depois escolha Cor.

Passo 4: Debaixo Esquemas, clique no esquema que deseja editar.

Passo 5: Selecione o gradiente que você gostaria de modificar.

Passo 6: Clique na seta ao lado de Gradiente, Em seguida, selecione APF.

Passo 7: Cole o código CSS do gradiente no campo de entrada. 

Passo 8: Clique Economize.

Você verá o resultado na visualização do editor de temas. Essa abordagem funciona bem para cabeçalhos, banners e até mesmo seções inteiras..

Como adicionar fundo gradiente CSS em GemPages

O GemPages oferece suporte nativo para personalização de plano de fundo, incluindo cores estáticas, gradientes e imagens. Mas se você quiser mais controle usando CSS customizado, veja como:

Etapa 1: clique com o botão direito do mouse na seção onde você deseja aplicar um gradiente.

Passo 2: Selecionar Código personalizado no menu de contexto.

Passo 3: No modal CSS exibido, insira seu código CSS personalizado. Exemplo:

.gdXweR3hSd {

  fundo: gradiente linear (135 graus, #f6d365, #fda085) !importante;

}

Explicação:

.gdXweR3hSd

• Isto é um Seletor de classe CSS.
• Ele tem como alvo qualquer elemento em sua página que tenha o nome da classe .gdXweR3hSd

fundo: gradiente linear (135 graus, #f6d365, #fda085);

• Esta linha aplica uma fundo gradiente para a seção selecionada.

Vamos dividir ainda mais:

• fundo: é a propriedade CSS usada para definir o plano de fundo de um elemento.
• gradiente linear(…) é uma função que cria uma transição suave entre cores.
• 135deg: Isso significa que o gradiente fluirá diagonalmente - do canto superior esquerdo ao canto inferior direito.
  • Você pode alterar esse valor para outros ângulos como 90deg (da esquerda para a direita), 180deg (de cima para baixo), etc.
    
• #f6d365: Isto é o cor inicial do gradiente.
• #fda085: Isto é o cor final do gradiente.

Passo 4: Clique Economize.