htmlcssgradientlinear-gradients

CSS Linear Gradient not linear

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%? Screenshot of color gradients Can anyone see what's wrong here?

Solution

  • If you use two colours with similar luminance levels, like blue and green, you can see that the blue bands are the same size as the green bands. So there’s nothing wrong with your code.

    .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) 50%, var(--to) 100%);
}
.tile:not(:last-child) {
    border-right: solid 1px black;
}
    <div class="block">
        <div class="tile" style="--from: green; --to: blue">01</div>
        <div class="tile" style="--from: blue; --to: green">02</div>
        <div class="tile" style="--from: green; --to: blue">03</div>
        <div class="tile" style="--from: blue; --to: green">04</div>
        <div class="tile" style="--from: green; --to: blue">05</div>
        <div class="tile" style="--from: blue; --to: green">06</div>
        <div class="tile" style="--from: green; --to: blue">07</div>
        <div class="tile" style="--from: blue; --to: green">08</div>
        <div class="tile" style="--from: green; --to: blue">09</div>
        <div class="tile" style="--from: blue; --to: green">10</div>
        <div class="tile" style="--from: green; --to: blue">11</div>
        <div class="tile" style="--from: blue; --to: green">12</div>
        <div class="tile" style="--from: green; --to: blue">13</div>
</div>

    If you’re not happy with the standard linear gradients, use this site to generate a wide variety of non-linear gradients, which often look much better.

    .block {
  font-family: 'Roboto Mono', monospace;
  display: flex;
  background: linear-gradient(90deg, rgb(10.196% 63.922% 100%) 0%, rgb(10.855% 63.824% 99.959%) 6.25%, rgb(12.808% 63.534% 99.836%) 12.5%, rgb(15.979% 63.062% 99.637%) 18.75%, rgb(20.246% 62.428% 99.368%) 25%, rgb(25.446% 61.656% 99.041%) 31.25%, rgb(31.379% 60.774% 98.669%) 37.5%, rgb(37.816% 59.818% 98.264%) 43.75%, rgb(44.51% 58.824% 97.843%) 50%, rgb(51.204% 57.829% 97.422%) 56.25%, rgb(57.641% 56.873% 97.018%) 62.5%, rgb(63.573% 55.991% 96.645%) 68.75%, rgb(68.773% 55.219% 96.318%) 75%, rgb(73.041% 54.585% 96.05%) 81.25%, rgb(76.212% 54.114% 95.85%) 87.5%, rgb(78.164% 53.823% 95.728%) 93.75%, rgb(78.824% 53.725% 95.686%) 100% );
}

.tile {
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100px; 
  color: white;
  font-size: 12px;
}

.tile:not(:last-child) {
  border-right: solid 1px black;
}
    <div class="block">
  <div class="tile">01</div>
  <div class="tile">02</div>
  <div class="tile">03</div>
  <div class="tile">04</div>
  <div class="tile">05</div>
  <div class="tile">06</div>
  <div class="tile">07</div>
  <div class="tile">08</div>
  <div class="tile">09</div>
  <div class="tile">10</div>
  <div class="tile">11</div>
  <div class="tile">12</div>
  <div class="tile">13</div>
</div>