CODEWITHSUNDEEP
htmlcsslinear-gradients
Robert Lepen
Robert Lepen

Reputation: 79

Background linear-gradient right - top

I am having a problem with setting up a gradient to single div. See a picture.

Is it even possible to set it up top and right? Thank you!

EDITED: so far background: linear-gradient(to left, rgb(240, 240, 240),rgb(255, 255, 255) 3%) ;

IMAGE

Upvotes: 0

Views: 1029

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

As I commented above you can use multiple gradient and you should use transparent color instead of white so we can see both of them since they will overlap (you may use background-color for the white or simply add it to the background property at the end)

body {
  background: #ccc;
}

.box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  background: linear-gradient(to left, rgb(40, 40, 40), transparent 3%), linear-gradient(to bottom, rgb(40, 40, 40), transparent 3%);
  background-color: #fff;
}
.box-alt {
  height: 200px;
  width: 200px;
  border: 1px solid;
  background: linear-gradient(to left, rgb(40, 40, 40), transparent 3%),
  linear-gradient(to bottom, rgb(40, 40, 40), transparent 3%),
  white;
}
<div class="box">
</div>

<div class="box-alt">
</div>

You can go with more gradient and also different color for each side:

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: linear-gradient(to left, rgb(200, 40, 0),transparent 3%),
 linear-gradient(to bottom, rgb(200, 0, 200),transparent 3%),
 linear-gradient(to top, rgb(40, 0, 40),transparent 3%),
 linear-gradient(to right, rgb(40, 200, 0),transparent 3%);
}
<div class="box">

</div>

You can also control size/position of each side:

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: linear-gradient(to left, rgb(200, 40, 0),transparent 3%) 0 50%/100% 50% no-repeat,
 linear-gradient(to bottom, rgb(200, 0, 200),transparent 3%) 40% 0/80% 100% no-repeat,
 linear-gradient(to top, rgb(40, 0, 40),transparent 3%) 80% 0/20% 100% no-repeat,
 linear-gradient(to right, rgb(40, 200, 0),transparent 3%) ;
}
<div class="box">

</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

What you are looking for is the box-shadow

box-shadow syntax is defined as:

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset

In your case you have to use inset as you want the shadow inside the box.

Stack Snippet

.shadow {
  height: 100px;
  box-shadow: -4px 4px 10px 0 #eee inset;
}
<div class="shadow"></div>

Upvotes: 2

Related Questions