Gerador de propriedades CSS

Um gerador de propriedades CSS é uma ferramenta que cria código CSS para um efeito visual a partir de um conjunto de controles deslizantes e seletores de cores, em vez de exigir que o usuário digite o código manualmente. Este gerador abrange quatro efeitos: gradientes, sombras de caixa, arredondamento das bordas e sombras de texto. Cada painel exibe uma prévia em tempo real e produz CSS pronto para copiar.

O que ele gera

• Gradientes: transições lineares ou radiais entre duas cores
• Sombras de caixa: uma sombra projetada ou interna ao redor de um elemento, com controles de deslocamento, desfoque, expansão, cor e opacidade
• Raio da borda: cantos arredondados, iguais nos quatro cantos ou definidos individualmente
• Sombras de texto: uma sombra atrás do texto, com controles de deslocamento, desfoque, cor e opacidade

Cada configuração atualiza a prévia e o CSS gerado ao mesmo tempo, permitindo verificar as alterações antes de copiar o código.

Como calcular um gradiente linear em CSS

Um gradiente linear vai de uma cor a outra ao longo de uma linha reta. Sua sintaxe CSS é:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

O ângulo é medido em graus, de 0 a 360. position1 e position2 definem onde cada cor atinge sua intensidade máxima, como uma porcentagem do comprimento do gradiente.

Exemplo prático

Os valores iniciais do gerador são um ângulo de 90 graus, #ff5f6d em 0% e #ffc371 em 100%. Isso produz:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

A primeira linha é uma alternativa de cor simples para navegadores que, por algum motivo, não conseguem renderizar o gradiente. A segunda linha é o próprio gradiente.

Fórmula do gradiente radial

Um gradiente radial se espalha para fora a partir de um ponto central, em vez de seguir uma linha:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Este gerador sempre produz um gradiente radial circular. Ele não oferece uma opção de forma elíptica nem uma maneira de mover o ponto central; somente as duas cores e as posições dos pontos de parada podem ser alteradas.

Os dois tipos de gradiente desta ferramenta usam exatamente duas cores, definidas com os seletores de cor Color 1 e Color 2. Não há opção de adicionar uma terceira parada de cor.

Fórmula da sombra de caixa em CSS

Uma sombra de caixa é uma sombra desenhada ao redor das bordas de um elemento:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset e v-offset movem a sombra para a esquerda/direita e para cima/baixo. Valores positivos a deslocam para a direita ou para baixo; valores negativos, para a esquerda ou para cima. blur suaviza a borda da sombra; um número maior espalha a suavização por uma área mais ampla. spread aumenta ou reduz o tamanho da sombra antes da aplicação do desfoque. Adicionar a palavra-chave inset antes dos deslocamentos desenha a sombra dentro da borda do elemento, em vez de fora dela.

Exemplo prático

Com as configurações padrão (deslocamento horizontal de 5px, deslocamento vertical de 5px, desfoque de 10px, expansão de 0px, preto com opacidade de 20%), a ferramenta produz:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

O controle deslizante de opacidade do seletor de cores vai de 0 a 100 e é convertido para a escala de 0 a 1 usada por rgba(); assim, 20% se torna 0,2.

Fórmula do arredondamento das bordas em CSS

O raio da borda arredonda os cantos de um elemento. Existem duas formas:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Quando os quatro cantos compartilham um valor, o gerador usa a forma abreviada. Quando são diferentes, ele lista os quatro valores nesta ordem exata: superior esquerdo, superior direito, inferior direito e inferior esquerdo.

Exemplo prático

O raio padrão é de 10px em todos os cantos:

1border-radius: 10px;
2

Uma imagem de avatar circular normalmente usa border-radius: 50%, embora esse valor esteja fora do intervalo permitido pelo controle deslizante deste gerador (de 0 a 100 pixels).

Fórmula da sombra de texto em CSS

Uma sombra de texto funciona como uma sombra de caixa, mas não tem um raio de propagação e se aplica às letras, e não à caixa de um elemento:

1text-shadow: h-offset v-offset blur color;
2

Exemplo prático

Com as configurações padrão (deslocamento horizontal de 2px, deslocamento vertical de 2px, desfoque de 3px, preto com opacidade de 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Quais códigos de cor o gerador aceita

Cada controle de cor tem uma amostra e uma caixa de texto. A caixa de texto aceita um código de cor hexadecimal, no formato # usado em todo o CSS. Quatro comprimentos são válidos: três dígitos (#f00), quatro dígitos (#f00c), seis dígitos (#ff0000) e oito dígitos (#ff0000cc). As formas abreviadas representam a mesma cor que as formas longas, porque cada dígito é duplicado: #123 representa a mesma cor que #112233.

O último dígito da forma de quatro dígitos e o último par da forma de oito dígitos definem a transparência. Os geradores de sombras ignoram esses dígitos e usam o valor alfa do controle deslizante de Opacidade; assim, o controle sempre mostra a transparência realmente aplicada. Se a caixa de texto contiver algo que não seja uma cor hexadecimal, como um código digitado pela metade, a sombra volta a ser preta em vez de produzir uma declaração inválida.

Como usar o gerador de propriedades CSS

1. Escolha uma guia: Gradient, Box Shadow, Border Radius ou Text Shadow.
2. Ajuste os controles deslizantes, os seletores de cores e as caixas de seleção. Cada controle deslizante tem uma caixa numérica ao lado para inserir um valor exato. O painel de prévia e o código CSS são atualizados imediatamente.
3. Selecione o botão "Copiar para a área de transferência" e cole o código em uma folha de estilos ou em um atributo style.
4. Selecione "Redefinir" para retornar todos os campos das quatro guias aos valores iniciais. Isso também muda a guia ativa de volta para Gradient, mesmo que outra guia estivesse sendo visualizada.

Dúvidas frequentes

Para que serve um gerador de propriedades CSS? Ele transforma as entradas dos controles deslizantes e dos seletores de cores em código CSS pronto para gradientes, sombras e cantos arredondados, para que a pessoa que o utiliza não precise escrever nem memorizar essa sintaxe manualmente.

Qual é a diferença entre um gradiente linear e um radial? Um gradiente linear muda de cor ao longo de uma linha reta em um ângulo definido. Um gradiente radial muda de cor para fora a partir de um ponto central. A opção radial desta ferramenta sempre usa uma forma circular.

Esta ferramenta pode criar um gradiente com mais de duas cores? Não. Tanto o painel de gradiente linear quanto o de gradiente radial aceitam exatamente duas cores, Color 1 e Color 2, cada uma com sua própria posição de parada.

Qual é a diferença entre uma sombra de caixa interna e uma comum? Uma sombra de caixa comum fica fora das bordas do elemento, como a luz que incide atrás dele. Uma sombra interna fica dentro das bordas, fazendo o elemento parecer pressionado para dentro, em vez de elevado.

Por que os valores dos cantos arredondados aparecem na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo? Essa é a ordem em que a propriedade CSS border-radius espera que quatro valores separados sejam escritos, seguindo no sentido horário a partir do canto superior esquerdo.

O CSS gerado funciona em todos os navegadores? Gradientes, sombras de caixa, arredondamento das bordas e sombras de texto são compatíveis com as versões atuais do Chrome, Firefox, Safari e Edge. Nenhum prefixo de fornecedor é adicionado à saída.

Referências

1. MDN Web Docs: Usando gradientes CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow