w3 linear gradients

Without defining the angle and color stops the gradient will go from top to the bottom (180deg) and colors will be evenly distributed

You may use keywords "to top, right, bottom, left"
For example: "to bottom right" will create gradient from top-left corner to the bottom-right corner

background:linear-gradient(#aaa,#fff)

background:linear-gradient(#aaa 20%,#fff 80%) /* start/end colors shifted 20% */

background:linear-gradient(90deg,red,transparent,blue),#fff /* note: transparent=rgba(0,0,0,0) */

background:linear-gradient(90deg,red,white,blue)

background:linear-gradient(90deg,red,rgba(255,255,255,0),blue),#fff

background:
linear-gradient(135deg,transparent 10px,#c00 10px),
linear-gradient(225deg,transparent 10px,#c00 10px),
linear-gradient(315deg,transparent 10px,#c00 10px),
linear-gradient(45deg,transparent 10px,#c00 10px);
background-repeat:no-repeat;
background-size:51% 51%;
background-position:top left,top right,bottom right,bottom left

w3 repeating gradients

background:repeating-linear-gradient(red,green 18%,blue 25%)

background:repeating-linear-gradient(red,red 11px,white 11px, white 22px)

w3 radial gradients

background:radial-gradient(#1a82f7,#2F2727) /*default = ellipse at center*/

background:radial-gradient(circle,#1a82f7,#2F2727)

background:radial-gradient(closest-corner at 80% 20%,#1a82f7,#2F2727)

background:-prefix-radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0))

background:radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%)

background:
radial-gradient(circle at top left,rgba(204,0,0,0)14px,#c00 15px),
radial-gradient(circle at top right,rgba(204,0,0,0)14px,#c00 15px),
radial-gradient(circle at bottom right,rgba(204,0,0,0)14px,#c00 15px),
radial-gradient(circle at bottom left,rgba(204,0,0,0)14px,#c00 15px);
background-repeat:no-repeat;
background-size:51% 51%;
background-position:top left,top right,bottom right,bottom left

Reflection in Blue