I want to use a linear-gradient background where I eventually want to control when the gradient should start. Right now I have it set to start at 50%.I do that like this:
.block{ font-family: 'Roboto Mono', monospace; display: flex;}.tile{aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; text-align: center; width: 100px; color: white; font-size: 12px; background: linear-gradient(to right, var(--from) 0%, var(--from) 50%, var(--to) 100%);}.tile:not(:last-child) { border-right: solid 1px black;}<div class="block"><div class="tile" style="--from: #bc6df2; --to: #0099ff">01</div><div class="tile" style="--from: #0099ff; --to: #0082ec">02</div><div class="tile" style="--from: #0082ec; --to: #007ce7">03</div><div class="tile" style="--from: #007ce7; --to: #0082ec">04</div><div class="tile" style="--from: #0082ec; --to: #0082ec">05</div><div class="tile" style="--from: #0082ec; --to: #bc6df2">06</div><div class="tile" style="--from: #bc6df2; --to: #af51f0">07</div><div class="tile" style="--from: #af51f0; --to: #0094fb">08</div><div class="tile" style="--from: #0094fb; --to: #1aa3ff">09</div><div class="tile" style="--from: #1aa3ff; --to: #c989f4">10</div><div class="tile" style="--from: #c989f4; --to: #bc6df2">11</div><div class="tile" style="--from: #bc6df2; --to: #a335ee">12</div><div class="tile" style="--from: #a335ee; --to: #a335ee">13</div></div>It's easy to see on tile 01 and 08 that this is how things ought to behave: around 50% it starts fading from --from into --to.On tile 06 and 10, however, it seems like the gradient starts at maybe 80% or 90%?Image may be NSFW.
Clik here to view.
Can anyone see what's wrong here?
