diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
index 62f464e..6446058 100644
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
@@ -75,7 +75,7 @@ const TorrentCache = ({ cache, isMini }) => {
 
       ctx.lineWidth = borderWidth
       ctx.fillStyle = inProgress
-        ? createGradient(ctx, percentage)
+        ? createGradient(ctx, percentage, pieceSize)
         : isCompleted
         ? completeColor
         : isMini
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
index 968140c..b73bf84 100644
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
@@ -16,8 +16,8 @@ export const progressColor = '#86beee'
 export const activeColor = '#000'
 export const rangeColor = '#afa6e3'
 
-export const createGradient = (ctx, percentage) => {
-  const gradient = ctx.createLinearGradient(0, 12, 0, 0)
+export const createGradient = (ctx, percentage, pieceSize) => {
+  const gradient = ctx.createLinearGradient(0, pieceSize, 0, 0)
   gradient.addColorStop(0, completeColor)
   gradient.addColorStop(percentage / 100, completeColor)
   gradient.addColorStop(percentage / 100, progressColor)