Search code examples
cssgradient

Is it possible to align gradients between elements?

I'm trying to add a gradient to past days in a calendar, but the gradient lines not aligning look a bit meh.

div.month {
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--color-border);

}

div.day {
  background-color: var(--color-fill);
}

div.day + .past {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-fill),
    var(--color-fill) 1.5rem,
    var(--color-gradient-calendar-past) 1.5rem,
    var(--color-gradient-calendar-past) 3rem
  );
}
<div class="month noselect">
        <div class="day void"><div class="day-number"></div></div>
        <div class="day past"><div class="day-number">1</div></div>
        <div class="day past"><div class="day-number">2</div></div>
        <div class="day past"><div class="day-number">3</div></div>
        <div class="day past"><div class="day-number">4</div></div>
        ...
        <div class="day today"><div class="day-number">17</div></div>

Without making the days square (aspect-ratio: 1/1), is it possible to align these gradients?

enter image description here

I was thinking maybe I can make the whole component's background that gradient, but then I run into the same problem if I want to use the same gradient coloured differently on other days.

enter image description here

Solution

  • I would do it like this:

    Use the gradient as the background for div.month and make it red. For the normal div.day you add a white background and for the .past you make the background transparent and add a backdrop-filter.

    div.month {
    height: 23vW;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: repeating-linear-gradient(-45deg, #fff, #fff 1.5rem, #fdc5d0 1.5rem, #fdc5d0 3rem );
}

div.day {
    border: 1px solid #fff;
    background-color: #fff;
}

div.day + .past {
    background-color: #0000;
    backdrop-filter: grayscale(1) brightness(1.13);
}

div.day + .blocked {
    background-color: #0000;
}
    <div class="month noselect">
    <div class="day void"><div class="day-number"></div></div>
    <div class="day past"><div class="day-number">1</div></div>
    <div class="day past"><div class="day-number">2</div></div>
    <div class="day past"><div class="day-number">3</div></div>
    <div class="day past"><div class="day-number">4</div></div>
    <div class="day past"><div class="day-number">5</div></div>
    <div class="day past"><div class="day-number">6</div></div>
    <div class="day past"><div class="day-number">7</div></div>
    <div class="day blocked"><div class="day-number">8</div></div>
    <div class="day past"><div class="day-number">10</div></div>
    <div class="day past"><div class="day-number">11</div></div>
    <div class="day past"><div class="day-number">12</div></div>
    <div class="day past"><div class="day-number">13</div></div>
    <div class="day past"><div class="day-number">14</div></div>
</div>

    By using grayscale(1) the background is not red anymore and then I push the brightness a little bit.

    I assumed you want to use red for blocked dates. If you want to use more colors than red and grey (for example green for holidays) you can use hue-rotate:

    div.day + .holiday {
    backdrop-filter: hue-rotate(123deg);
}