{"id":507,"date":"2020-06-28T03:04:10","date_gmt":"2020-06-28T03:04:10","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=507"},"modified":"2024-02-28T23:33:47","modified_gmt":"2024-02-28T23:33:47","slug":"css-gradients-linear-gradients","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-gradients-linear-gradients\/","title":{"rendered":"CSS Gradients &#8211; Linear Gradients"},"content":{"rendered":"<p>CSS gradients allow you to make a background of two or more colors that smoothly transition from one to the other. They have been with us for quite a long time, and they have very good browser support. Most modern browsers understand them without prefixes, for IE9 and older there is a Gradient Filter, and for IE9 you can also use SVG.<\/p>\n<p>Gradients can be used wherever images are used: in backgrounds, as list bullets and they can be set in <span class=\"code\"><a href=\"..\/..\/css-properties\/content.php\">content<\/a><\/span> or <span class=\"code\"><a href=\"..\/..\/css-properties\/border-image.php\">border-image<\/a><\/span> properties.<\/p>\n<h3>Linear-Gradient<\/h3>\n<p>Linear gradients are quite easy to use. For the most elementary gradient it is enough to set the start and end colors, such as:<\/p>\n<pre class=\"language-css\"><code>background: linear-gradient(crimson, darkgreen);<\/code><\/pre>\n<p>This will give the following effect:<\/p>\n<style>\n.basic {width:100%;height:100px;background: linear-gradient(crimson, darkgreen);color:white;margin-bottom:10px;}\n<\/style>\n<div class=\"basic\">Linear-Gradient Example<\/div>\n<p>Colors can be any number of two or more values. You can also control the direction of the gradient and the borders (stop points) of colors.<\/p>\n<p>You can set the direction using degrees or keywords.<br \/>\n<strong>Degrees:<\/strong><br \/>\nFrom 0 to 360, for example <span class=\"code\">270deg<\/span>.<br \/>\n<strong>Keywords:<\/strong><br \/>\n<span class=\"code\">to top<\/span> = <span class=\"code\">0deg<\/span>;<br \/>\n<span class=\"code\">to right<\/span> = <span class=\"code\">90deg<\/span>;<br \/>\n<span class=\"code\">to bottom<\/span> = <span class=\"code\">180deg<\/span> &#8211; default value;<br \/>\n<span class=\"code\">to left<\/span> = <span class=\"code\">270deg<\/span>.<\/p>\n<p>Keywords can be combined with each other to get a diagonal gradient, for example <span class=\"code\">to top left<\/span>.<\/p>\n<p>Below you can see how different directions work in stretching from crimson to darkgreen:<\/p>\n<pre class=\"language-css\"><code>.top {background: linear-gradient(to top, crimson, darkgreen);}\r\n.right {background: linear-gradient(to right, crimson, darkgreen);}\r\n.bottom {background: linear-gradient(to bottom, crimson, darkgreen);}\r\n.left {background: linear-gradient(to left, crimson, darkgreen);}\r\n.top-left {background: linear-gradient(to top left, crimson, darkgreen);}\r\n.top-right {background: linear-gradient(to top right, crimson, darkgreen);}\r\n.bottom-left {background: linear-gradient(to bottom left, crimson, darkgreen);}\r\n.bottom-right {background: linear-gradient(to bottom right, crimson, darkgreen);}\r\n<\/code><\/pre>\n<style>\n.box {width:100px;height:100px;float:left;margin-left:10px;margin-bottom:10px;color:#fff;}\n.top {background: linear-gradient(to top, crimson, darkgreen);}\n.right {background: linear-gradient(to right, crimson, darkgreen);}\n.bottom {background: linear-gradient(to bottom, crimson, darkgreen);}\n.left {background: linear-gradient(to left, crimson, darkgreen);}\n.top-left {background: linear-gradient(to top left, crimson, darkgreen);}\n.top-right {background: linear-gradient(to top right, crimson, darkgreen);}\n.bottom-left {background: linear-gradient(to bottom left, crimson, darkgreen);}\n.bottom-right {background: linear-gradient(to bottom right, crimson, darkgreen);}\n<\/style>\n<div class=\"box top\">to top<\/div>\n<div class=\"box right\">to right<\/div>\n<div class=\"box bottom\">to bottom<\/div>\n<div class=\"box left\">to left<\/div>\n<div class=\"box top-left\">to top left<\/div>\n<div class=\"box top-right\">to top right<\/div>\n<div class=\"box bottom-left\">to bottom left<\/div>\n<div class=\"box bottom-right\">to bottom right<\/div>\n<div style=\"clear:both;\"><\/div>\n<p>It should be remembered that <span class=\"code\">to top right<\/span> is not the same as <span class=\"code\">45deg<\/span>. The gradient colors are located perpendicular to the gradient direction line. When <span class=\"code\">to top right<\/span> is used, the line goes from the lower left to the upper right corner, with <span class=\"code\">45deg<\/span> it is strictly at this angle, regardless of the size of the shape.<\/p>\n<p>The difference is clearly visible on the rectangular shapes as seen below:<\/p>\n<pre class=\"language-css\"><code>.top-right {background: linear-gradient(to top right, crimson, darkgreen);}\r\n.deg {background: linear-gradient(45deg, crimson, darkgreen);}\r\n<\/code><\/pre>\n<style>\n.box1 {width:100%;height:100px;margin-bottom:10px;color:#fff;}\n.top-right {background: linear-gradient(to top right, crimson, darkgreen);}\n.deg {background: linear-gradient(45deg, crimson, darkgreen);}\n<\/style>\n<div class=\"box1 top-right\">to top right<\/div>\n<div class=\"box1 deg\">45deg<\/div>\n<p>You can also set stop points for gradient colors; values \u200b\u200bare specified in units or percent and can be more than 100% and less than 0%.<\/p>\n<p>Examples of setting values \u200b\u200bin <span class=\"code\">%<\/span>, <span class=\"code\">em<\/span> and values \u200b\u200bthat go beyond the boundaries of an element are:<\/p>\n<pre class=\"language-css\"><code>.percent {background: linear-gradient(to right, yellowgreen 15%, gold 25%);}\r\n.ems {background: linear-gradient(to right, purple 2em, crimson 3em, orangered 7em, gold 12em);}\r\n.negative {background: linear-gradient(to right, skyblue -50%, purple 150%);}\r\n<\/code><\/pre>\n<style>\n.box3 {width:100%;height:100px;margin-bottom:10px;color:#fff;}\n.percent {background: linear-gradient(to right, yellowgreen 15%, gold 25%);}\n.ems {background: linear-gradient(to right, purple 2em, crimson 3em, orangered 7em, gold 12em);}\n.negative {background: linear-gradient(to right, skyblue -50%, purple 150%);}\n<\/style>\n<div class=\"box3 percent\">Percent Value<\/div>\n<div class=\"box3 ems\">EM Value<\/div>\n<div class=\"box3 negative\">Negative Values<\/div>\n<p>The closer the stop points of neighbouring colors are, the clearer the border between them will be. This way you can easily make striped backgrounds:<\/p>\n<pre class=\"language-css\"><code>.two {background: linear-gradient(to right, crimson 50%, darkgreen 50%);}\r\n.five{background: linear-gradient(to right, #63A69F 20%, #F2E1AC 20%, #F2E1AC 40%, #F2836B 40%, #F2836B 60%, #F2594B 60%, #F2594B 80%, #CD2C24 80%);}\r\n<\/code><\/pre>\n<style>\n.box4 {width:100%;height:100px;margin-bottom:10px;color:#fff;}\n.two {background: linear-gradient(to right, crimson 50%, darkgreen 50%);}\n.five{background: linear-gradient(to right, #63A69F 20%, #F2E1AC 20%, #F2E1AC 40%, #F2836B 40%, #F2836B 60%, #F2594B 60%, #F2594B 80%, #CD2C24 80%);}\n<\/style>\n<div class=\"box4 two\">Two Colours<\/div>\n<div class=\"box4 five\">Five Colours<\/div>\n<p>In addition to the usual <span class=\"code\"><a href=\"..\/..\/css-functions\/linear-gradient.php\">linear-gradient<\/a><\/span> you can also make <span class=\"code\"><a href=\"..\/..\/css-functions\/repeating-linear-gradient.php\">repeating-linear-gradient<\/a><\/span>, a repeating gradient.<\/p>\n<p>An example of an <span class=\"code\">repeating-linear-gradient<\/span> is as follows:<\/p>\n<pre class=\"language-css\"><code>.grad-1 {background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}\r\n.grad-2 {background: repeating-linear-gradient(90deg, green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}<\/code><\/pre>\n<style>\n.grad-1 {background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}\n.grad-2 {background: repeating-linear-gradient(90deg, green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}\n<\/style>\n<div class=\"box4 grad-1\">Repeating Gradient 1<\/div>\n<div class=\"box4 grad-2\">Repeating Gradient 2<\/div>\n<p>Unfortunately, repeating gradients behave haphazardly and are suitable only for patterns that do not care about accuracy. If you need accuracy, use <span class=\"code\">linear-gradient<\/span> in combination with <span class=\"code\"><a href=\"..\/..\/css-properties\/background-size.php\">background-size<\/a><\/span> and <span class=\"code\"><a href=\"..\/..\/css-properties\/background-repeat.php\">background-repeat<\/a><\/span>.<\/p>\n<p>Gradients have the same limitation as the <span class=\"code\"><a href=\"..\/..\/css-properties\/box-shadow.php\">box-shadow<\/a><\/span> property, they cannot be given colors or direction separately. This leads to duplication of code and an acute need to use pre-processors in the case of complex gradients.<\/p>\n<p>In combination with the basic capabilities of managing background images, gradients provide the broadest possibilities for creating backgrounds of varying degrees of complexity completely without the use of images. You can make complex and interesting patterns with gradients, but this is a completely different topic.<\/p>\n<p>Don&#8217;t forget to check out our <a href=\"..\/..\/css-gradient-generator\/\">CSS Gradient Generator<\/a> to help further with learning about gradients.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS gradients allow you to make a background of two or more colors that smoothly transition from one to the other. They have been with us for quite a long time, and they have very good browser support. Most modern browsers understand them without prefixes, for IE9 and older there is a Gradient Filter, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/507\/revisions\/508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/648"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}