Gradient shapes: blobs, orbs en bollen die echt lijken

Gradient shapes zijn blobs, orbs, bollen en pillen gevuld met een verloop waardoor ze belicht lijken, alsof ze volume hebben. Ze lijken echt als de schaduwwerking één lichtbron volgt: een heldere highlight aan de kant naar het licht, een donkerdere kernschaduw aan de afgewende kant, een zwakke rand weerkaatst licht aan de uiterste rand en een zachte schaduw op de grond. Sla er één over en de vorm leest als een platte sticker met een verloop. Doe je het goed, dan zijn twee kleuren genoeg om een massief object te suggereren.

Hoe licht op een ronde vorm valt

Schilders beschrijven dit al eeuwen en het geldt voor elke ronde vorm die je tekent. Kies een lichtrichting voordat je een kleur kiest en schaduw dan elke zone in volgorde. Linksboven is de conventie omdat lezers dat verwachten, maar elke richting werkt als je consequent blijft.

Schaduwrecepten om te kopiëren

Deze swatches zijn lichtstudies: de schaduwwerking die je binnen een cirkel, cilinder of kegel zou plaatsen. Elk is van linksboven belicht. Pas ze toe op een vorm met afgeronde hoeken en het worden massieve objecten.

De bolrecepten eindigen op een kleur die iets lichter is dan de vorige. Die laatste stop is de weerkaatste rand, net binnen de rand van de cirkel geplaatst zodat hij het afsnijden overleeft. Zonder hem sterft de rand van de vorm af en lijkt het een gat in plaats van een bal. De gids radiaal verloop legt uit hoe de middenpositie en grootte de uitloop veranderen.

Een verloopbol maken in CSS

Maak van het element een cirkel met border-radius: 50% en verschuif het midden van het verloop naar het licht. De cirkel snijdt het verloop af, dus de highlight zit uit het midden binnen een perfect ronde vorm. Een vervaagde, platgedrukte ellips eronder geeft de slagschaduw.

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

Blobs, pillen en organische vormen

Blobs lezen als vriendelijk en zacht, daarom zijn ze populair voor welzijns-, eten-, kinder- en creatieve merken. Ze volgen dezelfde lichtregels als een bol, maar hun bobbels vangen highlights op meer dan één plek. Houd één hoofdhighlight en laat de andere zwak zijn. Meer over de stijl zelf staat in organische vormen in ontwerp.

• Pil: een afgeronde rechthoek geschaduwd als een cilinder, met het licht over zijn lengte.
• Kiezel: een platgedrukte bol, met brede highlight en laag contrast, als matte steen.
• Druppel: een bol met een heldere, scherpe highlight en een sterke weerkaatste rand, die glanzend leest.
• Wolkblob: overlappende cirkels met één gedeelde highlight, zodat ze als één vorm lezen.

Waarom gradient shapes plat ogen en hoe je dat oplost

Kleurtemperatuur doet veel van het werk. Warm licht geeft koele schaduwen en koel licht warme. Een violette bol onder een iets roze highlight met een blauwviolette kernschaduw voelt veel echter dan een die gewoon van lichtviolet naar donkerviolet gaat. Warme en koele kleuren legt de combinatie uit.

Gradient shapes gebruiken in een lay-out

1. 1

   Kies één lichtbron

   Schrijf hem op: linksboven, warm. Elke vorm, schaduw en highlight volgt hem.

2. 2

   Gebruik drie formaten

   Eén grote vorm, één middelgrote en één kleine leest als diepte. Vijf even grote blobs lezen als confetti.

3. 3

   Laat vormen het kader verlaten

   De grootste vorm aan een rand afsnijden laat het canvas groter aanvoelen dan zijn grenzen.

4. 4

   Houd een rustig vlak voor woorden

   Vormen zijn druk. Zet ze om de kop heen, nooit erachter.

5. 5

   Voeg korrel toe

   Een fijne ruislaag laat gladde digitale schaduwwerking gedrukt aanvoelen en verbergt banding. Zie korrelige verlopen.

Wil je vormen liever niet met de hand schaduwen, dan zijn de Marks van Gradiently levende achtergronden opgebouwd uit gestapelde materialen, licht en korrel, die op elk formaat waarin je ontwerpt schoon renderen. Voor één gloeiende bol als heroafbeelding zie je gradient orbs.