如何从右上角到左下角获得渐变色

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> 

Answer 2

try this:

div {
    background: -webkit-linear-gradient(45deg, #2F2727, #1a82f7);
}

Answer 3

You should use radial gradient positioning - top right for this, like:

background: linear-gradient(
            to top right, 
            #0F0437, #612D50
);

Have a look at the snippet below:

 .box { display: inline-block; padding: 50px 70px; font-size: 100px; border-radius: 20px; color: white; background: linear-gradient( to top right, #0F0437, #612D50 ); } 

 <div class="box">B</div> 

Hope this helps!

Answer 4

Use to top right for a diagonal angle (alternatively 45deg ), and line-height equivalent to your height value to vertically center the letter.

Here it is with colors sampled from your image:

 div { background: linear-gradient(to top right, #080135 0%, #612d50 100%); width: 100px; height: 100px; border-radius: 4px; color: white; font-family: sans-serif; text-align: center; font-weight: bold; font-size: 60px; line-height: 100px; } 

 <div>B</div>