0

Desired result

I'm trying to stack some CSS gradients together to replicate a fill pattern from Excel.

From Center, Red on Blue

Problem

I have something that almost works, but it requires additional HTML elements and I'm not too sure I'm using blend-mode correctly.
I know you can specify multiple background-blend-mode in CSS, but I can't manage to make them work together on a single element.

My solution so far

I was able to get a decent solution using nested elements and two layers.

Using white as an intermediate step

The first layer uses background-blend-mode: darken; with white and blue.
My solution looks a little bit different, but here is how Excel would show it:

From Center, White on Blue

My HTML/CSS: codepen link

<div class="example"></div>

.example {
  --middle-color: #FFFFFF;
  --outer-color: #4472C4;
  width: 500px;
  height: 150px;
  background:
      linear-gradient(to right, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%),
      linear-gradient(to bottom, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%);
  background-blend-mode: darken;
}

Using white again, then stacking

To make the red portion, I again use white, but this time with background-blend-mode: lighten;
Finally, I combine the two layers with mix-blend-mode

Here is the implementation: codepen link

<div class="example">
  <div class="inner"></div>
</div>

.example {
  --middle-color: #FFFFFF;
  --outer-color: #4472C4;
  width: 500px;
  height: 150px;
  background:
      linear-gradient(to right, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%),
      linear-gradient(to bottom, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%);
  background-blend-mode: darken;
}
.inner {
  --middle-color: red;
  --outer-color: #FFFFFF;
  width: 100%;
  height: 100%;
    background:
      linear-gradient(to right, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%),
      linear-gradient(to bottom, var(--outer-color), var(--middle-color) 50%, var(--outer-color) 100%);
    background-blend-mode: lighten;
    mix-blend-mode: multiply;
}

I'm not 100% sure that mix-blend-mode: multiply; is the correct choice, but I am a software developer who has not studied graphic design and blending at all.

Improve this question
12
  • 1
    This is more like a coding question, made to sound like a design question.
    – Lucian
    Feb 7 at 21:27
  • It's not something I'd readily expect a developer to know. Sure it's generated using code, but the language and subject matter seem graphical to me. I use SO a lot and didn't expect it to be answerable there, so I came here.
    – Jean-Bernard Pellerin
    Feb 7 at 21:29
  • Well, maybe somebody will answer this. If you need a random designer opinion, all the images in the post look like something from the 90's. Can you achieve that with code ? Maybe, but sometimes less is more.
    – Lucian
    Feb 7 at 21:32
  • 1
    I'll wait a day and if the response continues to be less than encouraging I'll delete this and go back to my cave on SO.
    – Jean-Bernard Pellerin
    Feb 7 at 21:41
  • 2
    Yes it could be done in SVG without any blend modes. see example here. I used three squares, one red base rect, and two on top with a blue to transparent blue gradient.
    – Billy Kerr
    Feb 9 at 11:30

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.