Gradiente de seda: dobras suaves de luz e cor

Um gradiente de seda imita o tecido caído: dobras longas de cor, cada uma com um brilho estreito e claro ao longo da crista e uma sombra suave e profunda no vale. Esse padrão de luz fina e sombra larga é o que o olho lê como brilho sedoso. É um visual de material, não de cor, e por isso o mesmo champanhe ou esmeralda pode parecer chapado como mistura simples e luxuoso como seda. Você precisa de três coisas: uma cor de tecido, um brilho mais claro e um pouco mais quente, e uma sombra mais escura e mais saturada.

Como a seda captura a luz

As fibras da seda são lisas e levemente prismáticas, então refletem a luz de modo concentrado. Uma dobra de seda produz um brilho rápido e nítido onde encara a luz e uma descida longa e suave para a sombra. O algodão fosco na mesma dobra daria um gradiente largo e opaco, sem pico nítido. Copie essas propriedades e qualquer cor começa a se ler como seda.

Códigos de gradiente de seda

Cada um destes é um gradiente linear com as dobras embutidas: faixas desiguais, brilhos nítidos e sombras largas. Funcionam sozinhos como fundo e como base da versão em camadas mais adiante.

Mantenha o ângulo entre 100 e 125 graus para as dobras caírem na diagonal, como um tecido pendurado por um canto. Uma dobra perfeitamente vertical parece cortina; uma horizontal parece fita. As sedas escuras, como meia-noite e sangue de boi, são as que mais perdoam, porque a sombra esconde qualquer emenda desajeitada. Combinam naturalmente com tipografia dourada, como nos gradientes preto e dourado.

Seda furta-cor: duas cores num só tecido

A seda furta-cor é tecida com fios de uma cor no sentido do comprimento e de outra no sentido da largura. Conforme o tecido gira, você vê mais de uma ou da outra, e o tom muda entre luz e sombra. É a seda mais marcante de imitar, e basta uma mudança: use um tom nos brilhos e nos ombros e outro tom nos vales.

Como construir dobras de seda em CSS

Um único gradiente linear dá dobras paralelas, o que parece tecido plissado. O drapeado de verdade se curva. Sobreponha dois gradientes em ângulos ligeiramente diferentes, um com luz suave e outro com as dobras, e acrescente uma grande sombra radial para um lado cair. O resultado se lê como tecido que pende.

.silk {
  min-height: 100vh;
  background-color: #4a3216;
  background-image:
    radial-gradient(ellipse 70% 90% at 85% 100%, rgba(40, 24, 8, 0.65) 0%, transparent 70%),
    linear-gradient(100deg, transparent 30%, rgba(255, 246, 225, 0.35) 38%, transparent 44%),
    linear-gradient(115deg, #6b4f2a 0%, #c8a46a 18%, #f7ead0 23%, #b8925a 30%,
      #5a3f1e 48%, #a8844f 62%, #efdcb6 66%, #8c6a3a 74%, #4a3216 100%);
}

Seda versus gradientes de cetim, líquido e cromado

Onde os gradientes de seda funcionam melhor

A seda sinaliza cuidado, o que a torna certa para joalheria, perfumaria, skincare, noivas, hotéis e lançamentos premium. Combine-a com uma serifa refinada ou uma sem serifa larga e leve, e use poucas palavras. Champanhe e marfim combinam com casamentos; esmeralda, meia-noite e sangue de boi combinam com noite e luxo. As paletas de cores de luxo e as paletas de cores para casamento trazem mais combinações.

Os Marks do Gradiently empilham até três materiais, cada um com luz e grão próprios, então uma superfície pode ter profundidade e brilho sem você construir dobras à mão. Cada um é renderizado em qualidade total em todos os tamanhos em que você cria, de um convite a um Story, e mantém calma a área atrás das suas palavras. Explore o Mercado com palavras de cor como “champanhe” ou “esmeralda”.