How to get the gradient color from top right to bottom left corner

Question

I have trying to get the css gradient as like in the below bootstrap icon.

I just want two solutions from this code.

1.)How to make gradient color as like in icon(From top right to bottom left)?

2.)Vertical alignment of text within div(Possibility without using flex property)

Thanks in advance :)

div{
  width:100px;
  height:100px;
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
  border-radius:4px;
}
div p{
  color:white;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  font-size:42px;
}

<div>
 <p>
   b
 </p>
</div>

Answer 1

1. Use to top right keyword for directing gradient to move from bottom left corner to top right corner.
   background: linear-gradient(to top right, #2F2727, #1a82f7);
2. Use line-height equal to height.

More Information about css gradient is here.

div{
  width:100px;
  height:100px;
  background: linear-gradient(to top right, #2F2727, #1a82f7);
  border-radius:4px;
}
div p{
  color:white;
  text-align:center;
  text-transform:uppercase;
  font-weight:bold;
  font-size:42px;
  line-height: 100px;
}

<div>
 <p>
   b
 </p>
</div>