How to apply Linear Gradient Css

Linear Gradient Css:

A linear gradient css serves as a technique to populate a background with a seamless shift from a set of colors progressing in a direct line from a starting point to an endpoint in a specified direction this method permits the crafting of visually pleasing backgrounds and the application of effects on elements.

Syntax:
The fundamental structure for generating a linear gradient css is as follows

background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction: This indicates the direction of the gradient line. It can take values like to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right, or you can use an angle in degrees (e.g., 45deg).
  • color-stop: These are the points where the gradient transitions from one color to another. You can specify one or more color stops, each consisting of a color and an optional position percentage.

Let’s create a box element and apply different linear gradient css to it.

  1. to top: This means the linear gradient starts from the bottom and goes to the top.
<div class="gradient-box gradient-box-bottom-to-top">
  Gradient box with a linear gradient background from bottom to top.
</div>
.gradient-box {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    text-align: center;
    color: black;
    box-shadow: 9px 6px 19px -5px rgba(0,0,0,0.43);
  }
 .gradient-box-bottom-to-top{
  background: linear-gradient(to top, #2e22c3, #17a21f);
  }

You can learn box shadow css here.

Linear gradient background from bottom to top.
  1. to right: This means the linear gradient starts from the left and goes to the right.
   .gradient-box-left-to-right{
  background: linear-gradient(to right, #2e22c3, #17a21f);
  }
Linear gradient background from left to right.
  1. to bottom: This means the linear gradient starts from the top and goes to the bottom.
.gradient-box-top-to-bottom{
  background: linear-gradient(to bottom, #2e22c3, #17a21f);
} 
Linear gradient background from top to bottom.
  1. to left: This means the linear gradient starts from the right and goes to the left.
.gradient-box-right-to-left{
  background: linear-gradient(to left,  #2e22c3, #17a21f);
}
Linear gradient background from right to left.
  1. Diagonal Directions:
    You can combine these keywords to create diagonal gradients.

For example, to top left means the gradient starts from the bottom right and goes to the top left.

.gradient-box-bottom-right-to-top-left{
  background: linear-gradient(to top left,  #2e22c3, #17a21f);
 }
Linear gradient background from bottom right to top left.

Similarly, to bottom right starts from the top left and goes to the bottom right.

.gradient-box-top-left-to-bottom-right{
  background: linear-gradient(to bottom right,  #2e22c3, #17a21f);
 }
Linear gradient background from top left to bottom right.

Similarly, you can apply linear gradient css for other remaining directions to top right and to bottom left as well.

Linear gradient background from bottom left to top right.
Linear gradient background from top right to bottom left.

These directional keywords helps in controlling the orientation of linear gradients and achieve different visual effects based on the flow of colors.

Multi-Color Linear Gradient Css:

background: linear-gradient(to right, #07209d, #a21c1c, #46fc5d);
Gradient box having multiple colors linear gradient.

This creates a gradient that goes from #07209d at the left to #a21c1c in the middle and finally blue #46fc5d at the right.

Diagonal Linear Gradient Css with Angle:

background: linear-gradient(45deg,  #2e22c3, #17a21f);

This creates a gradient that goes from red (#2e22c3) at the bottom-left to green (#17a21f) at the top-right diagonally.

An angle of 45 degrees effectively means a gradient that goes from the bottom left to the top right direction. In the context of angles in linear gradients, 0 degrees points from bottom to the top direction, and the angles increase in clockwise direction.

In CSS linear gradients, angles can range from 0 to 360 degrees or 0 to -360 degrees. Negative angles represent rotations in a anti clockwise direction. Positive angles are rotations in clockwise direction. As shown in figure below

linear gradient css angle direction
  • 0deg: to top which means 0deg is effectively the same as using “to top” as direction in linear gradient.
  • Similar below angles are equivalent to following directions.
    • 45deg: to top right
    • 90deg: to right
    • 135deg: to bottom right
    • 180deg: to bottom
    • 225deg: to bottom left
    • 270deg: to left
    • 315deg: to top left
    • 360deg: to top
    • -45deg: to top left
    • -90deg: to left
    • -135deg: to bottom left
    • -180deg: to bottom
    • -225deg: to bottom right
    • -270deg: to right
    • -315deg: to top right
    • -360deg: to top

angles can span the full 360-degree circle, allowing you to create gradients that point in any direction around that circle.

Below few linear gradient css are applied at certain angles.

Linear gradient direction at angle 0deg.
Linear gradient direction at angle 45deg.
Linear gradient direction at angle 90deg.
Linear gradient direction at angle 36deg.
Linear gradient direction at angle -45deg.
Linear gradient direction at angle -90deg.
Linear gradient direction at angle -36deg.

using turn for angle– 1 turn is 360 deg . We can use turn in place of degree. Like for 45 deg it will be 0.125turn

Using radians – 2π i.e 6.2832rad is equal to 360deg.

using gradians – 400grad is equal to 360deg.

Linear Gradient Css with Color Stops at Specific Positions:

background: linear-gradient(90deg, rgba(7,145,157,1) 0%, rgba(159,25,25,1) 30%, rgba(14,15,113,0.9) 80%);
Linear gradient having color stops at 0%, 30% and 80% of the width of box.

This linear gradient creates a transition from rgba(7,145,157,1) at 0% of the width, progresses through rgba(159,25,25,1) at 30%, and finally arrives at rgba(14,15,113,0.9) at 80%. You can use hex codes as you normally would, replacing the rgba values if you want. The use of rgba allows for setting transparency as well. For example, in rgba(14,15,113,0.9), the transparency is set to 0.9. You can use rgba wherever we had previously used hex color codes.

No direction specified in linear gradient:

When we don’t specify any direction in linear gradient, the gradient will be from top to bottom direction. It is equivalent to specifying to bottom.

background: linear-gradient(#2e22c3, #17a21f);
linear gradient with no direction specified equivalent to bottom.

Using transparent in place of color hex code in linear gradient:

Using transparent in place of a color code in a gradient means that the color at that particular stop will be completely transparent, allowing the background or content behind the element to show through. This can create various visual effects, such as fading out an element or creating a see-through region.

For example, let’s say we have the following gradient:

background: linear-gradient(to right, red, transparent, blue);
Linear gradient using transparent in place of one of the hex code.

In this gradient, the transparent stop creates a region where the element becomes gradually transparent from left to right, blending the red color at the start with the background or content behind it, and then fully revealing the blue color at the end.

Similarly, you can use rgba(0, 0, 0, 0.4) to achieve transparency. Here, rgba(0, 0, 0, 0) means a fully transparent black color.

Transparency is particularly useful for creating overlays, fades, and layering effects in web design.

Repeating Linear Gradient Css:

background: repeating-linear-gradient(45deg, #07919d 15%, #9f1919 25%, #0e0f71 30%);
Box with a repeating linear gradient.

A repeating linear gradient CSS is similar to a regular linear gradient, divides the available space into color stops according to the specified percentages. However, unlike a regular linear gradient that transitions from one color to another and stops at the last color, a repeating linear gradient restarts from the beginning after reaching the last color stop. This creates a repeating pattern of the specified colors.

In our example, at 15%, the color #07919d starts and turns into #9f1919 at 25%. This transformation again finishes into #0e0f71 at 30%. Then, after 30%, the same pattern is repeated until the whole box is filled. Before 15%, it is filled by the same pattern. The first color stop is the starting point for the pattern, and the last color stop is the ending point for the pattern. If no percentage is specified, it’s assumed to be 0% for the first color stop and 100% for the last color stop. You can also specify the color stop in pixels instead of a percentage value.

Multiple Linear Gradient Css

Here’s an example of layering multiple linear gradients.

background: linear-gradient(to top right, #2e22c3, #17a21f),
                linear-gradient(to top left, #c9a30f, #192a9f),
                linear-gradient(to bottom, #0fc9b0, #cb1bc8 );
Box with multiple linear-gradients.

In this example, three linear gradients are layered on top of each other. The first gradient goes from #2e22c3 to #17a21f in the to top right direction, and the second gradient goes from #c9a30f to #192a9f in the to top left direction and third gradient goes from #0fc9b0 to #cb1bc8 in to bottom direction.

Using same color stops in linear gradient

background: linear-gradient(to right, #2e22c3, #2e22c3 10%, #17a21f 10%, #17a21f 35%,  #c9a30f 35%, #c9a30f 60%);
Linear gradient with same color stops.

As you can see we are using #2e22c3 at 0% and 10%, #17a21f at 10% and 35%, #c9a30f at 35% and 60%. Using same color at different stops , we don’t see fading effect , rather the color is visible in a fixed boundary. You can think of it is a range for a color boundary. In fact we can write above css as follows and result will be the same.

background: linear-gradient(to right, #2e22c3 0% 10%, #17a21f 10% 35%,#c9a30f 35% 60%);

You can use linear gradients in CSS to create various effects and backgrounds on your web elements. You can combine different colors, positions, and directions to achieve the desired visual impact.

Don't Miss Out! Subscribe to Read Our Latest Blogs.

If you found this blog helpful, share it on social media.

Subscription form (#5)

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Scroll to Top