Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS linear gradient angle position

enter image description here

I am trying to create an angled background using linear-gradient.

However, I can only work out how to create a white area that goes from the bottom left to the top right.

background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%);

https://jsfiddle.net/bfq3vv6n/

But, I want the white area to start half way up the left side of the page rather than from the bottom, and then finish where it already is in the top right (see image for how I want it to look)

Does anyone know how I can do this?

like image 539
ChatNoir Avatar asked Dec 14 '16 12:12

ChatNoir


People also ask

How do you use DEG in a linear gradient?

The values to top , to bottom , to left , and to right are equivalent to the angles 0deg , 180deg , 270deg , and 90deg , respectively. The other values are translated into an angle. The gradient line's angle of direction. A value of 0deg is equivalent to to top ; increasing values rotate clockwise from there.

How do you do linear gradient on top and bottom in CSS?

If you want more control over its direction, you can give the gradient a specific angle. When using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

How do I stop a repeating linear gradient in CSS?

A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). A percentage of 0% , or a length of 0 , represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.

How you define the function in CSS image for a linear gradient?

The linear-gradient() function is an inbuilt function in CSS which is used to set the linear gradient as the background image. Syntax: background-image: linear-gradient( direction, color1, color2, ... )


2 Answers

Something like this would help?

div {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+40,e0e0e0+100&0+0,0+39,1+40,1+100 */
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(225,225,225,0) 39%, rgba(224,224,224,1) 40%, rgba(224,224,224,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  height: 100px;
  width: 100px;
  border: 2px solid #ccc;
}
<div></div>

I used it with the help of ColorZilla. Also, it provides a lot of tools to make it look like what you expect.

Preview

preview

like image 59
Praveen Kumar Purushothaman Avatar answered Sep 28 '22 08:09

Praveen Kumar Purushothaman


It's easier to calculate if you set the background size to be double in width.

This way, the center of the gradient will be coherent with the middle point being at the center of the left side:

div {
  width: 200px;
  height: 200px;
  border: solid 1px green;
  background-image: linear-gradient(153.43deg, white 50%, gray 50%);
  background-size: 200% 100%;
  background-position: right top;
}
<div></div>
like image 24
vals Avatar answered Sep 28 '22 07:09

vals