CODEWITHSUNDEEP
cssbackground-imagebackground-color
Mikhail Kopylov
Mikhail Kopylov

Reputation: 2058

How to fill part of the background with gradient color?

I'd like to have div with color filled background:

How to define second condition?

https://jsfiddle.net/tf4nn5p6/

Upvotes: 0

Views: 2558

Answers (2)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

Use below css for the same and here you can control by background-size: 100% 20%; and background-position: left bottom; with no-repeat

.my-div{
  height: 50px;
  background: linear-gradient(to right, transparent, #FFEBEE);
  background-size: 100% 20%;
  background-position: left bottom;
  background-repeat: no-repeat;
  border: 1px solid red;
  text-align: center;
}

Upvotes: 0

t1m0n
t1m0n

Reputation: 3431

Is this what you want? 

.my-div{
  text-align: center;
  height: 50px;
  background-image: linear-gradient(to right, transparent, #FFEBEE);
  background-size: 100% 20%;
  background-position: left bottom;
  background-repeat: no-repeat;
  border: 1px solid red;
}
<div class='my-div'>
 text
</div>

Upvotes: 5

Related Questions