CSS gradient crossed from top to bottom with right to left

Question

CSS gradient crossed from top to bottom with right to left

Navigation

#1 by (1 votes)

0

What I'm trying is that the black color at a distance (col-lg-2 in Bootstrap) that are 16.6666666% is blurred with blue, that is, the black is combined with the blue blue different tone on the other side.

Is it possible to do this madness?

I have this code

body{
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
    background: -webkit-linear-gradient(#50a1ce,#020822);
    background: -o-linear-gradient(#50a1ce,#020822);
    background: -moz-linear-gradient(#50a1ce,#020822);
    background: linear-gradient(#50a1ce,#020822);

    background: -webkit-linear-gradient(to right,#171616 16.66666%);
    background: -o-linear-gradient(to right,#171616 16.66666%);
    background: -moz-linear-gradient(to right,#171616 16.66666%);
    background: linear-gradient(to right,#171616 16.66666%);
}

This is my screen:

css3 css

asked by Alberto Siurob 21.06.2017 в 20:10

source

1 answer

Visual Basic Equivalence to C # I mark an error in my visa, it says that the variable row is not defined, this error marks me when I do not have data in the database

score 1 · Accepted Answer

you can use background-blend-mode to mix backgrounds, I'm not sure of the effect you want to achieve, but there are different mixing effects, I leave you an effect with multiply

div{
  height: 300px;
  width: 300px;
  margin: 0;    
  background: linear-gradient(to right,#171616 16%, #FFFFFF), linear-gradient(#50a1ce,#020822);
  background-blend-mode: multiply;
}

<div></div>