How can I generate a diamond-shaped gradient?

Question

My goal is to create the follwing pattern:

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.

Answer 1

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>