htmlcssgradientlinear-gradients

How can I generate a diamond-shaped gradient?

My goal is to create the follwing pattern:

diamond-shaped gradient

Can I generate this kind of gradient using only vanilla CSS?

I've seen this done in figma. However, there's only conic-gradient in CSS and no specific diamond-gradient.

Solution

  • You can achieve this effect by blending together two linear gradients, perpendicular to each other.

    .diamond {
  background-blend-mode: multiply;
  background-image:
    linear-gradient(to left, #000, #0f0, #000),
    linear-gradient(to top, #000, #0f0, #000);
}

div {
  position: absolute;
  height: 200px;
  width: 200px;
  color: white;
}
    <div class="diamond">Diamond gradient</div>