Topics
In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on. A linear gradient is defined by an axis—the gradient line —and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.
- Linear gradients
- Getting Fancy With It
Hi! This tutorial will go over how to create gradients with CSS. You’ll be able to do this with beginner skills in HTML and CSS and apply it to any element where you might use background or background-color. Gradients can give your web design a sophisticated look and creating them in CSS rather than using an image reduces download time and bandwidth usage of your website.
Browser support
A quick note before we start: CSS gradients is a feature that was introduced somewhat recently, which means that older versions of browsers (my grandma’s clunky laptop that hasn’t been updated since 1997) might not recognize and support the code. Additionally, the different browsers sometimes interpret code slightly differently (think of it as having to speak different dialects to each one).
![Css Css](https://i.ytimg.com/vi/8r3_HLVaWwM/maxresdefault.jpg)
In order to make sure our code works in every situation, we write multiple lines of code that do the same thing but may be written slightly differently, as well as a failsafe that sets your color to a solid color for browsers that don’t recognize CSS gradients.
Let’s get started!
Linear gradientsA linear gradient smoothly transitions one color to another in a straight line. The code is written this way:Substitute color1 and color2 for your colors of choice, either a recognized color name or hexadecimal code, and separate your two colors with a comma. The comments, marked by /*comment text*/ aren’t part of the code, but tell you what that line of code does. When you’re writing this, make sure that color 1 and color 2 are the same for all lines of code.This will create a vertical gradient starting with color 1 at the top and color 2 at the bottom. It looks something like this:
Getting Fancy With ItWhat I’ve shown above, declaring two colors in your code, is the minimum amount of information you need to give to make a CSS gradient. Here’s a few ways you can customize it:
Gradient directionsThe default orientation of a gradient is top to bottom. Declaring a direction before your colors tells your browser which way your gradient transitions in. There are a few different ways you can do this. From left to right, the three gradients above were created with the following code:
Horizontal gradients are made by telling your gradients to start at the left or right before your colors, separated by a comma. You can also specify top or bottom in the same way.
Diagonal gradients can be made by specifying which corner your gradient starts or ends in, such as top left or bottom right – two sides separated by a space. Note that this is one where browsers need slightly different instructions:
- for Safari (-webkit-linear-gradient), specify the corner where color 1 begins, ex: top left
- for Opera and Firefox, (-o-linear-gradient and -moz-linear-gradient), specify the corner where color 2 ends, ex: bottom right
- for all other browsers (what we’ve been calling ‘Standard Syntax’ in the comments, linear-gradient), specify the corner where color 2 ends, with the word ‘to’ before, ex: to bottom right
Css Gradient W3
Specific angles can also be specified by saying the angle number followed by ‘deg’ (no space) meaning degrees, for example: 60deg. Zero degrees gives you a vertical gradient that starts from the bottom (think 12 o’clock on a clock) and the degrees rotate it clockwise until 360 degrees.
Multiple Color StopsRocket typist pro 2 1 – expand typed abbreviations. To have a multi-color gradient, simply list more than two colors in the order you want them, separated by commas. This is the CSS for the gradient above:
You can also specify where you want your colors to transition, by adding a percentage or pixel number after your color, separated by a space. For example, here I’ve created a gradient where red begins to transition to yellow at 30% of the width, which then transitions to green at 70% of the width:
Since I didn’t say at which point the last color should end, it defaulted to 100%, or the very end of the gradient. As I mentioned earlier, you can also specify transition points using pixels (ex: #c94A4a 100px) instead of percentages –just don’t use both pixels and percentages in the same line of code.