Gradientformer: blobbar, klot och sfärer som ser äkta ut

Gradientformer är blobbar, klot, sfärer och piller fyllda med en gradient som får dem att se upplysta ut, som om de hade volym. De ser äkta ut när skuggningen följer en ljuskälla: en klar högdager på den sida som vetter mot ljuset, en mörkare kärnskugga på bortre sidan, en svag kant av reflekterat ljus allra ytterst och en mjuk skugga på marken. Hoppar du över någon av dem läses formen som ett platt klistermärke med en gradient på. Gör du rätt räcker två färger för att antyda ett fast föremål.

Hur ljus faller på en rund form

Målare har beskrivit det här i århundraden, och det gäller varje rund form du ritar. Välj en ljusriktning innan du väljer färg och skugga sedan varje zon i ordning. Uppe till vänster är konventionen eftersom läsare förväntar sig det, men vilken riktning som helst fungerar om du håller dig konsekvent.

Skuggningsrecept du kan kopiera

De här proverna är ljusstudier: skuggningen du skulle lägga inuti en cirkel, en cylinder eller en kon. Var och en är upplyst uppifrån till vänster. Lägg dem på en form med rundade hörn så blir de fasta föremål.

Sfärrecepten slutar på en färg som är något ljusare än den före. Det sista stoppet är den reflekterade kanten, placerad strax innanför cirkelns rand så att den överlever klippningen. Utan den blir formens kant död och den ser ut som ett hål i stället för en boll. Guiden om radiell gradient förklarar hur mittpunktens position och storlek ändrar avklingningen.

Så gör du en gradientsfär i CSS

Gör elementet till en cirkel med border-radius: 50% och flytta sedan gradientens mittpunkt mot ljuset. Cirkeln klipper gradienten, så högdagern hamnar utanför mitten inuti en helt rund form. En suddig, hoptryckt ellips under ger den kastade skuggan.

.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}

Blobbar, piller och organiska former

Blobbar läses som vänliga och mjuka, vilket är varför de är populära för välmående, mat, barn och kreativa varumärken. De följer samma ljusregler som en sfär, men deras utbuktningar fångar högdagrar på mer än ett ställe. Behåll en huvudhögdager och låt de andra vara svaga. Mer om själva stilen finns i organiska former i design.

• Piller: en rektangel med rundade hörn, skuggad som en cylinder, med ljuset löpande längs dess längd.
• Småsten: en hoptryckt sfär med bred högdager och låg kontrast, som matt sten.
• Droppe: en sfär med en klar, skarp högdager och en stark reflekterad kant, som läses som blank.
• Molnblobb: överlappande cirklar med en gemensam högdager, så att de läses som en form.

Varför gradientformer ser platta ut, och hur du åtgärdar det

Färgtemperatur gör mycket av jobbet. Varmt ljus ger kalla skuggor och kallt ljus ger varma. En violett sfär under en svagt rosa högdager med en blåviolett kärnskugga känns mycket mer äkta än en som bara går från ljusviolett till mörkviolett. Varma och kalla färger förklarar paret.

Använda gradientformer i en layout

1. 1

   Välj en ljuskälla

   Skriv ner den: uppe till vänster, varm. Varje form, skugga och högdager följer den.

2. 2

   Använd tre storlekar

   En stor form, en medelstor och en liten läses som djup. Fem lika stora blobbar läses som konfetti.

3. 3

   Låt formerna lämna bilden

   Att beskära den största formen vid en kant får ytan att kännas större än sina gränser.

4. 4

   Behåll ett lugnt område för ord

   Former är stökiga. Lägg dem runt rubriken, aldrig bakom den.

5. 5

   Lägg till korn

   Ett fint brusskikt får jämn digital skuggning att kännas tryckt och döljer bandning. Se korniga gradienter.

Om du hellre inte skuggar former för hand är Gradiently-Marks levande bakgrunder byggda av staplade material, ljus och korn, och de renderas rent i varje storlek du designar i. För ett enda glödande klot som hero-bild, se gradientklot.