Gradients are commonly used to make a web page more aesthetically pleasing. Instead of using a plain color to style a box, a gradient allows you to show a transition between two or more colors, which can be more visually appealing and eye-catching. <\/p>\n\n\n\n
To work with gradients in CSS, there are two properties you can use: linear-gradient and radial-gradient. These properties allow you to create linear and radial gradients, respectively. <\/p>\n\n\n\n
This tutorial will discuss, with a few examples, how to create a linear and radial gradient in CSS. By the end of this tutorial, you\u2019ll be an expert at creating gradients in CSS. <\/p>\n\n\n\n
CSS Gradients<\/h2>\n\n\n\n
In design, gradients are transitions between two or more colors. Gradients can be simple transitions, but can also include angles, multiple colors, and can be styled in a wide range of ways. <\/p>\n\n\n\n
There are two types of gradients supported in CSS. These are: <\/p>\n\n\n\n
\n
Linear gradients<\/li>\n\n\n\n
Radial gradients<\/li>\n<\/ul>\n\n\n\n
Linear gradients create a transition between two or more colors from top to bottom or left to right. Radial gradients are color transitions that radiate from an origin point, such as a shape. <\/p>\n\n\n\n
In CSS, gradients are defined using the background CSS property. This property is used to create a background for a web element and is shorthand for the CSS background properties including background-color and background-image. <\/p>\n\n\n\n
Here is the syntax for using the background property:<\/p>\n\n\n\n
Now we\u2019re ready to start creating gradients in CSS. Let\u2019s start by discussing linear gradients. <\/p>\n\n\n\n
CSS Linear Gradients<\/h2>\n\n\n\n
Linear gradients are transitions between two or more colors along a straight line. <\/p>\n\n\n\n
For instance, a linear gradient background may appear from left to right, top to bottom, or from the bottom left to the top right corner of an element. By default, a gradient will appear from top to bottom, but you can specify a custom direction for your gradient. <\/p>\n\n\n\n
Linear gradients have color stops, which are the colors you want to include in your transition. There is no limit to how many colors you specify with a linear gradient. <\/p>\n\n\n\n
Here is the syntax for a linear gradient function in CSS:<\/p>\n\n\n\n
In this syntax, direction represents the direction of the gradient, and color1, color 2, and so on represent the color stops in our gradient. <\/p>\n\n\n\n
Let\u2019s explore a few examples of a linear gradient in CSS. <\/p>\n\n\n\n
Top to Bottom Gradient<\/h3>\n\n\n\n
Suppose we want to create a gradient that appears from the top to the bottom of a box. This is the default gradient created with the linear-gradient()<\/code> property. <\/p>\n\n\n\n
Our gradient should start at the color #00C9FF (light blue), and end at the color #92FE9D (light green). Here\u2019s the code we could use to create our gradient:<\/p>\n\n\n\n
On the other hand, we may want to create a gradient that shows a color transition from left to right. We could do so using the following code:<\/p>\n\n\n\n
Our gradient transitions between our two colors from left to right. This transition occurs because we specified to left<\/code> as the direction of our gradient. Alternatively, if we wanted our gradient to appear from right to left, we could have used to left<\/code> instead of to right<\/code> in our code. <\/p>\n\n\n\n
Diagonal Gradient<\/h3>\n\n\n\n
You can create diagonal gradients using the linear-gradient()<\/code> property by specifying the horizontal and vertical starting points for a gradient. <\/p>\n\n\n\n
If you wanted to create a gradient that transitions to the bottom right, you could do so by specifying to bottom right<\/code> as your gradient. Or if you wanted a gradient that transitions to the top left, you could use to top left<\/code> as your gradient. <\/p>\n\n\n\n
Suppose we want to create a gradient that transitions to the top right of our box. We could do so using this code:<\/p>\n\n\n\n
.gradient {\n\tbackground: linear-gradient(to top right, #00C9FF, #92FE9D);\n}<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Our gradient starts with the light blue color in the bottom left, then transitions to the green color in the top right of the box.<\/p>\n\n\n\n
Color Stops<\/h3>\n\n\n\n
So far, our gradients have only transitioned between two colors. However, you can specify more than two colors if you want to create a more complex gradient that transitions between multiple colors. <\/p>\n\n\n\n
Suppose we want to create a gradient that transitions from the color #00D2FF (light blue) to #92FE9D (light green), to #3A47D5 (dark blue). This transition should occur from left to right. We could create this gradient using this code:<\/p>\n\n\n\n
In this example, our gradient transitions between three different colors from left to right. <\/p>\n\n\n\n
Angles<\/h3>\n\n\n\n
In our previous examples, we have used predefined directions (i.e. top right to bottom left) to create our gradients. If we want more control over how our gradients appear, we can use custom angles. <\/p>\n\n\n\n
Angles should be specified as the first value in a linear gradient, in place of where you would specify a direction. <\/p>\n\n\n\n
Suppose you wanted to create a transition between #00C9FF and #92FE9D at a 120-degree angle. You could do so using this code:<\/p>\n\n\n\n
In our example, we specified a gradient that transitions between blue and green at a 120 degree angle from left to right. If we wanted to create a gradient that transitions at a 40 degree angle, for example, we could specify 40deg<\/code> as our angle. <\/p>\n\n\n\n
Transparent Gradient<\/h3>\n\n\n\n
CSS gradients can be made more or less transparent by using RGBA colors. <\/p>\n\n\n\n
RGBA colors use the RGB (red, green, blue) method of presenting colors. However, RGBA colors include an additional parameter called alpha that defines the transparency of a color. The value of the alpha parameter should be between 0 and 1 (the lower the value, the more transparent the color will appear). <\/p>\n\n\n\n
Suppose we wanted to create a gradient from left to right between the colors #00C9FF and #92FE9D. Our first color should start off 50% transparent, and our final color should be 30% transparent. We could use the following code to create this gradient:<\/p>\n\n\n\n
If we compare this to our previous gradient, we can see our colors are more transparent. In this example, we used RGBA values to specify our colors instead of using hex values. <\/p>\n\n\n\n
We specified 0.5 as the alpha value for our first color (blue), which makes the color 50% transparent. We specified 0.3 as the alpha value for our second color (green), which makes the color 70% transparent (remember, the lower the alpha value, the more transparent the color will appear). <\/p>\n\n\n\n
Hard Lines<\/h3>\n\n\n\n
Usually, when you\u2019re creating a gradient, you\u2019ll want a smooth and gradual transition between the colors in your gradient. However, if you want to create a gradient line that separates two colors in a gradient, you can do so by specifying a hard line. <\/p>\n\n\n\n
To specify a hard line, you should use the following syntax:<\/p>\n\n\n\n
So, if you wanted to have a hard line that occurs half-way through a black and green gradient, you could use black 50%<\/code>, green 50%<\/code> as a hard line. Or if you wanted to have a hard line that appears 70% through a blue and pink gradient, you could use blue 70%<\/code>, pink 30%<\/code> as a hard line. <\/p>\n\n\n\n
Here\u2019s an example of a gradient with a black hard line at the half-way point in the gradient:<\/p>\n\n\n\n
In this image you can see that, half-way through our gradient, a hard stop position has been created. <\/p>\n\n\n\n
CSS Radial Gradients<\/h2>\n\n\n\n
Radial gradients are transitions between two or more colors that radiate from an origin point. The origin point for a linear gradient is either an ellipse or a circle. <\/p>\n\n\n\n
A radial gradient must have at least two color stops, and there is no limit to how many color stops you can have in your gradient. Here is the syntax for a radial gradient:<\/p>\n\n\n\n
background: radial-gradient(shape size position, start color, next colors \u2026, final color);<\/pre><\/div>\n\n\n\n
Let\u2019s break down this syntax: <\/p>\n\n\n\n
\n
shape<\/strong> is the shape of the radial object (by default, this is an ellipse).<\/li>\n\n\n\n
size<\/strong> is the size of the shape for your radial object (by default, this is farthest-corner).<\/li>\n\n\n\n
at position<\/strong> is the position of the radial object (by default, this is center).<\/li>\n\n\n\n
start color<\/strong> is the first color in the gradient.<\/li>\n\n\n\n
next colors<\/strong> \u2026 are the colors between the start and final colors.<\/li>\n\n\n\n
final color<\/strong> is the last color in the gradient.<\/li>\n<\/ul>\n\n\n\n
Now we know the syntax for creating a radial gradient in CSS, we can explore a few examples. <\/p>\n\n\n\n
Default Radial Gradient<\/h3>\n\n\n\n
Suppose we want to create a radial gradient that is an ellipse and transitions between #4B6CB7 and #D9E7FF. We could do so using this code:<\/p>\n\n\n\n
In our example, we have created a radial gradient using two colors and the default values for a gradient. So, because we used the default values, our gradient is evenly spaced, the position of our radial object is in the center of the box, and our radial object is an ellipse. <\/p>\n\n\n\n
Different Color Stops<\/h3>\n\n\n\n
When you\u2019re working with radial gradients, you can specify your own color stops. This means that the transition between different colors in your gradient will occur at a specific position in the gradient, instead of in accordance with the default smooth transition. <\/p>\n\n\n\n
Suppose we wanted to create a radial gradient that transitions from #4B6CB7 to #D9E7FF to #9198E5. The first color should account for 25% of the gradient, the middle color should account for 50% of the gradient, and the last color should account for 25% of the gradient. <\/p>\n\n\n\n
We could create this gradient using the following code:<\/p>\n\n\n\n
Our gradient transitions between three colors at the points we specified in our code. To accomplish this effect, we first specified the color we wanted to include in our gradient, then we specified how much of the gradient for which the color should account. So, for instance, our middle color, #D9E7FF, occupies 50% of our gradient. <\/p>\n\n\n\n
Different Shapes<\/h3>\n\n\n\n
By default, the shape set for a radial gradient is an ellipse. However, you can also make your gradient a circle. You can do so by specifying the shape value circle<\/code> for your gradient. <\/p>\n\n\n\n
Suppose you wanted to create a gradient that transitions between #4B6CB7 and #D9E7FF. The center point of your radial gradient should be a circle. You could create this gradient using the following code:<\/p>\n\n\n\n
In our example, we have created a radial gradient between the color #4B6CB7 and #D9E7FF. The central point of our radial gradient is a circle, rather than an ellipse. <\/p>\n\n\n\n
Radial Gradient Position<\/h3>\n\n\n\n
The position of a radial gradient\u2019s center object can be changed. There are four keywords that are used to determine the position of the central object in a radial gradient. These are: <\/p>\n\n\n\n
\n
closest-corner<\/li>\n\n\n\n
farthest-corner<\/li>\n\n\n\n
closest-side<\/li>\n\n\n\n
farthest-side<\/li>\n<\/ul>\n\n\n\n
Suppose we wanted to create a circular radial gradient that appeared in the farthest corner at the position 50px 50px. We could do so using this code:<\/p>\n\n\n\n
.gradient {\n\tbackground: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);\n}<\/pre><\/div>\n\n\n\n
Our code returns: <\/p>\n\n\n\n<\/figure>\n\n\n\n
In this example, our radial gradient center point appears in the farthest corner at the position 50px 50px. You can see that our center point is in the top left corner, which shows that our gradient is working as intended. Then, our gradient transitions outward to the next color that we specified in our code. <\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Gradients are used to create transitions between two or more colors in CSS. The two main types of gradients used in CSS are linear gradients and radial gradients. <\/p>\n\n\n\n
This tutorial discussed, with reference to examples, how to create linear and radial gradients in CSS, and how to customize those gradients using the various attributes offered by each gradient type. Now you\u2019re equipped with the knowledge you need to start working with CSS gradients like an expert! <\/p>\n","protected":false},"excerpt":{"rendered":"Gradients are commonly used to make a web page more aesthetically pleasing. Instead of using a plain color to style a box, a gradient allows you to show a transition between two or more colors, which can be more visually appealing and eye-catching. To work with gradients in CSS, there are two properties you can…","protected":false},"author":240,"featured_media":14641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14640","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\n
Gradients are commonly used to make a web page more pleasing.<\/title>\n<meta name=\"description\" content=\"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-gradient\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Gradient\" \/>\n<meta property=\"og:description\" content=\"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-gradient\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-14T05:24:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:37:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"658\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Gradient\",\"datePublished\":\"2020-04-14T05:24:22+00:00\",\"dateModified\":\"2023-12-01T10:37:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/\"},\"wordCount\":1918,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-gradient\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/\",\"name\":\"Gradients are commonly used to make a web page more pleasing.\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg\",\"datePublished\":\"2020-04-14T05:24:22+00:00\",\"dateModified\":\"2023-12-01T10:37:13+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-gradient\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg\",\"width\":1020,\"height\":658},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-gradient\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Gradient\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gradients are commonly used to make a web page more pleasing.","description":"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-gradient\/","og_locale":"en_US","og_type":"article","og_title":"CSS Gradient","og_description":"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-gradient\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-14T05:24:22+00:00","article_modified_time":"2023-12-01T10:37:13+00:00","og_image":[{"width":1020,"height":658,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Gradient","datePublished":"2020-04-14T05:24:22+00:00","dateModified":"2023-12-01T10:37:13+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/"},"wordCount":1918,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-gradient\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/","url":"https:\/\/careerkarma.com\/blog\/css-gradient\/","name":"Gradients are commonly used to make a web page more pleasing.","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg","datePublished":"2020-04-14T05:24:22+00:00","dateModified":"2023-12-01T10:37:13+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Gradients are used to create backgrounds that transition between two colors. On Career Karma, learn how to create gradients using CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-gradient\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/apple-imac-on-brown-wooden-desk-948050.jpg","width":1020,"height":658},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-gradient\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Gradient"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14640"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14641"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n