How to Make a Gradient Flow in Multiple Directions

How can I make a gradient flow in multiple directions?

In 2020, you have more possibilities to achieve what you want considering new gradients and mask.

using conic-gradient()

html {  min-height:100%;  background:conic-gradient(from 45deg,red,blue,green,yellow,red);}

How to add multiple gradients with different directions CSS

There will be slight change in your html structure, All you need to do I fill a parent container with "bright gradient" and in it's child container, fill the section with darker one. Please check the code snippet below for better understanding :

.top-card {
  height: 230px;
  border-radius: 3%;
  text-align: center;
  padding: 20px 0px;
  }

  .gradient {
  max-width: 295px;
  min-width: 150px;
  background: rgb(248,197,117);
  background: linear-gradient(90deg, rgba(248,197,117,1) 13%, rgba(214,79,148,1) 91%);
  border-radius:3%;
  }

  .instagram {
    background: linear-gradient(to top, hsl(228, 28%, 20%) 98%, rgba(255, 255, 255, 0%) 2%);
  }

<div class="gradient">
  <div class="top-card instagram">
    <div class="name-container">
      <img src=images/icon-instagram.svg class="top-icon" alt="instagram">
      <p class="name">@realnathanf</p>
    </div>
    <h1 class="follower-number">11k</h1>
    <p class="follower-text">FOLLOWERS</p>
    <div class="increment-container-top">
      <img src="images/icon-up.svg" class="arrow" alt="arrow">
      <p class="increment-increase">1099 Today</p>
    </div>
  </div>
  </div>

Creating a CSS linear gradient based on two points relative to a rectangle

This was the way I solved it!

If you look at the GIF I have attached which illustrates the points I am using in my calculations. The red line is the gradient line in the center of the rectangle and the black points are the start and end points of the gradient line. The two other points (black and white) is the user controlled points that the user can drag around any way he likes. The two red dots are the closest position on the line relative to each user controlled point (perpendicular line points, p1 and p2).

I get the distance between the perpendicular line points and the gradient line start and end points. And then to calculate the percent value needed for the CSS linear-gradient value, I add the two distances, dived them by the gradient line length and multiply the value by 100.

ax = ((p1.x - gradientLine.point1.x) * (gradientLine.length / 2)) / (gradientLine.point2.x - gradientLine.point1.x);
ay = ((p1.y - gradientLine.point1.y) * (gradientLine.length / 2)) / (gradientLine.point2.y - gradientLine.point1.y);

percentValue = (((ax + ay) / line.length) * 100);

To get the value for the second parameter in the linear-gradient value I just do kind of the same thing, except I subtract 100 with the calculate value.

ax = ((p2.x - gradientLine.point2.x) * (gradientLine.length / 2)) / (gradientLine.point1.x - gradientLine.point2.x);
ay = ((p2.y - gradientLine.point2.y) * (gradientLine.length / 2)) / (gradientLine.point1.y - gradientLine.point2.y);
percentValue = 100 - ((((ax + ay) / gradientLine.length) * 100));

This way I get two percent values and can easily construct my CSS linear-gradient value consisting off the angle of the two user controlled points plus the two percent values I calculate:

background: linear-gradient([angle]deg, black [percentValue1]%, white [percentValue2]%)

Android - how to draw 2-directional gradient?

Answer is: you must combine 2 different LinearGradients, for example:

LinearGradient val = new LinearGradient(0, 0, 0, height, Color.WHITE, Color.BLACK, TileMode.CLAMP);
                LinearGradient sat = new LinearGradient(0, 0, width, 0, Color.WHITE, Color.HSVToColor(hsvCopy), TileMode.CLAMP);
                ComposeShader merged = new ComposeShader(val, sat, PorterDuff.Mode.MULTIPLY)

;

And of course important:

[view with this background].setLayerType(View.LAYER_TYPE_SOFTWARE, null);

on phones with 3.0 android and higher

---

Related Topics