<div class="item"><div class="box1"></div></div>
<div class="item"><div class="box2"></div></div>
<div class="item"><div class="box3"></div></div>
<div class="item"><div class="box4"></div></div>
<div class="item"><div class="box5"></div></div>
<div class="item"><div class="box6"></div></div>

body {
  background: #eee;
}

.item {
  positin: relative;
  display: inline-block;
  width: 310px;
  height: 310px;
  background: #fff;
  margin: 4px;
}

.box1 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box2 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box3 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box4 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box5 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box6 {
  width: 300px;
  height: 300px;
  position: relative;
  top: 5px;
  left: 5px;
}

.box1:before {
  content: "wersja podstawowa";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

.box2:before {
  content: "wersja 'circle'";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

.box3:before {
  content: "wersja 'circle at top right'";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

.box4:before {
  content: "wersja 'circle at bottom'";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

.box5:before {
  content: "wersja 'circle at right'";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

.box6:before {
  content: "wersja podstawowa z wieloma kolorami";
  position: absolute;
  font-size: 20px;
  color: #fff;
  top: 220px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: .5;
}

/*GRADIENTY*/

.box1 {
  background-image:  radial-gradient( lightgrey, black);
}

.box2 {
  background-image: radial-gradient(circle closest-side, black, #DCE775);
}

.box3 {
  background-image: radial-gradient(circle at top right, black, #FFB300);
}

.box4 {
  background-image: radial-gradient(circle at bottom, black, #00897B);
}

.box5 {
  background-image: radial-gradient(circle at right, black, #7B1FA2);
}

.box6 {
  background-image: radial-gradient(#D50000, #E65100, #FFEB3B, #43A047, #039BE5, #1A237E, #6A1B9A);  
}