Lineair gradiënt met 3 kleuren zonder verloop

Via custom CSS (website) kun je achtergronden instellen voor je blokken. Je maakt zo'n achtergrond bijvoorbeeld aan voor een class en die class voeg je toe aan je blok.

Je kunt deze gradiënts zelf aanmaken in PostDropper met onze handige tool. De achtergrond van dit blok is daarmee gemaakt op basis van 3 kleuren, met transparantie en harde overgangen.

Voor de gradiënts, zie ook de website van W3Schools.

background-image: linear-gradient(72deg, rgba(140,66,128,0.31) 39%,rgba(0,0,0,0) 39%),linear-gradient(307deg, rgba(5,98,145,0.33) 48%,rgba(0,0,0,0) 48%),linear-gradient(20deg, rgba(17,145,209,0.26) 50%);

PostDropper Gradiënt tool

Gradient tool van PostDropper

Met de gradiënt tool maak je zelf de mooiste gradiënts op basis van 2 tot maximaal 6 kleuren.

Per kleur kun je instellen:

  • de kleur
  • de overgang (hard of vloeiend)
  • de hoek
  • de lengte
  • de tranparantie

Je ziet direct het resultaat en me de kopieerknop zet je het in je klembord zodat je het in de custom CSS kunt invoegen.

Met de tool kan je random achtergronden genereren, die je zelf verder kunt bewerken. Onderstaande gradiënts zijn random aangemaakt op basis van de PostDropper kleuren.

Lineair gradiënt van 2 kleuren vloeiend

Code voorbeeld:

background-image: linear-gradient(180deg, rgba(140,66,128,0.45) 0%,rgba(247,204,99,0.32) 100%);

Lineair gradiënt met 3 kleuren en harde overgangen

Code voorbeeld:

background-image: linear-gradient(329deg, rgba(140,66,128,0.59) 16%,rgba(0,0,0,0) 16%),linear-gradient(291deg, rgba(247,204,99,0.7) 32%,rgba(0,0,0,0) 32%),linear-gradient(65deg, rgba(5,98,145,0.47) 48%);

Lineair gradiënt van 3 kleuren vloeiend

Code voorbeeld:

background-image: linear-gradient(216deg, rgba(140,66,128,0.29) 32%,rgba(247,204,99,0.29) 67%,rgba(5,98,145,0.29) 100%);

Lineair gradiënt 4 kleuren gemixt

Dit voorbeeld is een combinatie van harde en vloeiende overgangen.

Code voorbeeld:

background-image: linear-gradient(277deg, rgba(140,66,128,0.5) 16%,rgba(0,0,0,0) 16%),linear-gradient(10deg, rgba(247,204,99,0.31) 32%,rgba(5,98,145,0.51) 48%,rgba(0,0,0,0) 48%),linear-gradient(99deg, rgba(17,145,209,0.28) 64%)

Lineair gradiënt 4 kleuren met harde overgangen

Code voorbeeld:

background-image: linear-gradient(277deg, rgba(140,66,128,0.5) 16%,rgba(0,0,0,0) 16%),linear-gradient(64deg, rgba(247,204,99,0.31) 32%,rgba(0,0,0,0) 32%),linear-gradient(131deg, rgba(5,98,145,0.51) 48%,rgba(0,0,0,0) 48%),linear-gradient(99deg, rgba(17,145,209,0.28) 64%);

Lineair gradiënt 4 kleuren vloeiend

Code voorbeeld:

background-image: linear-gradient(270deg, rgba(140,66,128,0.25) 0%,rgba(247,204,99,0.26) 33%,rgba(5,98,145,0.28) 67%,rgba(17,145,209,0.3) 100%);

Lineair gradiënt 5 kleuren mix

Code voorbeeld:

background-image: linear-gradient(243deg, rgba(140,66,128,0.25) 16%,rgba(0,0,0,0) 16%),linear-gradient(39deg, rgba(247,204,99,0.43) 32%,rgba(5,98,145,0.72) 48%,rgba(0,0,0,0) 48%),linear-gradient(343deg, rgba(17,145,209,0.61) 64%,rgba(81,89,49,0.37) 80%);