Silkegradienter: myke folder av lys og farge

En silkegradient etterligner drapert stoff: lange folder av farge, hver med et smalt høylys langs ryggen og en myk, dyp skygge i dalen. Mønsteret av smalt lys og bred skygge er det øyet leser som glans. Det er et materialuttrykk fremfor et fargeuttrykk. Derfor kan samme champagne- eller smaragdgrønne farge virke flat i en enkel overgang og luksuriøs som silke. Du trenger tre ting: en stofffarge, et høylys som er lysere og litt varmere, og en skygge som er dypere og mer mettet.

Slik fanger silke lyset

Silkefibre er glatte og litt prismeformede, så de reflekterer lyset konsentrert. En fold i silke gir et raskt, skarpt høylys der den vender mot lyset, og en lang, myk overgang til skygge. Matt bomull i samme fold ville gitt en bred, dempet gradient uten en skarp topp. Gjenskap disse egenskapene, så begynner enhver farge å ligne silke.

Koder til silkegradienter

Hver av disse er én lineær gradient med innebygde folder: ulike båndbredder, skarpe høylys og brede skygger. De fungerer som bakgrunner alene og som base for varianten med flere lag lenger ned.

Hold vinkelen mellom 100 og 125 grader, slik at foldene faller diagonalt, som stoff som henger fra ett hjørne. En helt loddrett fold ligner en gardin, mens en vannrett ligner et bånd. Mørke varianter som midnatt og okseblod er mest tilgivende, fordi skyggene skjuler klønete overganger. De passer naturlig med gullfarget tekst, som i svarte og gylne gradienter.

Changérende silke: to farger i ett stoff

Changérende silke veves med én trådfarge på langs og en annen på tvers. Når stoffet snur, ser du mer av den ene eller den andre, så fargetonen skifter mellom lys og skygge. Det er det mest slående silkeuttrykket å etterligne, og det krever bare én endring: bruk én fargetone til høylys og flanker og en annen til dalene.

Slik bygger du silkefolder i CSS

Én lineær gradient gir parallelle folder, som ligner plissert stoff. Ekte drapering buer. Legg to gradienter i lag med litt ulike vinkler, én med mykt lys og én med foldene, og legg til en stor radial skygge som lar den ene siden falle bort. Resultatet ligner hengende stoff.

.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%);
}

Silke mot sateng, flytende gradienter og krom

Hvor silkegradienter fungerer best

Silke signaliserer omtanke, noe som gjør den riktig til smykker, parfyme, hudpleie, bryllup, hoteller og eksklusive lanseringer. Kombiner den med en raffinert serifskrift eller en lett, bred sans serif, og bruk få ord. Champagne og elfenben passer til bryllup; smaragd, midnatt og okseblod passer til kveldsbruk og luksus. Luksuriøse fargepaletter og fargepaletter til bryllup har flere kombinasjoner.

Marks fra Gradiently legger opptil tre materialer i lag med eget lys og korn, slik at en overflate kan få dybde og glans uten at du bygger folder for hånd. Hver Mark gjengis i full kvalitet i alle størrelser du designer i, fra invitasjon til story, og holder området bak teksten rolig. Søk på Markedet med fargeord som «champagne» eller «smaragd».