CODEWITHSUNDEEP
htmlcss
Prasath V
Prasath V

Reputation: 1356

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

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

logo

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>

Upvotes: 4

Views: 11452

Answers (4)

Mohammad Usman
Mohammad Usman

Reputation: 39322

  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>

Upvotes: 8

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18639

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>

Upvotes: 0

Lubos Voska
Lubos Voska

Reputation: 177

try this:

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

Upvotes: 1

Related Questions