如何实现左红右蓝的分色渐变背景效果？

当前元素背景为红色网格样式，我需要实现左半部分为红色、右半部分为蓝色的渐变效果，这是代码中的全部需求。

原红色网格背景代码：

div {
   width: 640px;
   height: 340px;
   background:
     linear-gradient(45deg,
       transparent,
       transparent 7px,
       red 7px,
       red 7.5px,
       transparent 7.5px,
       transparent 10px),
     linear-gradient(-45deg,
       transparent,
       transparent 7px,
       red 7px,
       red 7.5px,
       transparent 7.5px,
       transparent 10px);
   background-size: 10px 10px;
 }

<div></div>

只需修改background属性，替换为横向线性渐变即可实现需求，提供两种可选效果：

1. 左右硬分界（无渐变过渡） #

颜色在元素中间位置直接切换，严格区分左右区域：

div {
  width: 640px;
  height: 340px;
  background: linear-gradient(to right, red 50%, blue 50%);
}

2. 平滑渐变过渡 #

从红色自然过渡到蓝色，视觉效果更柔和：

div {
  width: 640px;
  height: 340px;
  background: linear-gradient(to right, red, blue);
}

HTML部分保持不变：

<div></div>

内容的提问来源于stack exchange，提问作者user17631451