话不多说先上图：

wxml页面代码：

<view class="color">
  <view class="linear-gradient color1">1</view>
  <view class="linear-gradient color2">2</view>
  <view class="linear-gradient color3">3</view>
  <view class="linear-gradient color4">4</view>
  <view class="linear-gradient color5">5</view>
  <view class="linear-gradient color6">6</view>
  <view class="linear-gradient color7">7</view>
  <view class="linear-gradient color8">8</view>
  <view class="linear-gradient color9">9</view>
  <view class="linear-gradient color10">10</view>
</view>

wxss模块代码：

.color{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5rpx;
  color: white;
  text-align: center;
  font-weight: bold;
}

.linear-gradient{
  height: 200rpx;  
}

.color1{  
  width: 48%;
  background-image: linear-gradient(45deg, #29bdd9 0%, #276ace 100%);
}

.color2{  
  width: 48%;
  background-image: linear-gradient(45deg, #ff9569 0%, #e92758 100%);
}

.color3{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%);
}

.color4{
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #8A2387 0%, #E94057 50%, #F27121 100%);
}

.color5{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #ec008c 0%, #fc6767 100%);
}

.color6{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #2980B9 0%, #6DD5FA 50%, #FFFFFF 100%);
}

.color7{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #f12711 0%, #f5af19 100%);
}

.color8{
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #C6FFDD 0%, #FBD786 50%, #f7797d 100%);
}

.color9{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
}

.color10{  
  margin-top: 10rpx;
  width: 48%;
  background-image: linear-gradient(45deg, #12c2e9 0%, #c471ed 50%, #f7797d 100%);
}