CSS Linear Gradient Function

CSS Linear Gradient

Linear Gradient function is introduced in CSS3 which helps to transform from one color to another seamlessly which would have been a herculean task to achieve, with linear-gradient() function you can achieve something like this.

Linear Gradient CSS
  • Linear Gradient function takes multiple parameters, you can give the rotation of the colors as deg, percent %, or direction, etc.. the syntax looks something like this.
linear-gradient(direction, color1, color2, ...);

The code for the above-shown image is as follows.

<html>

<head>
    <style>
        body {
            display: flex;
            flex-direction: row;
            background: wheat;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .div1 {
            width: 50%;
            height: 100%;
            background: wheat;
            color: white;
        }

        .div2 {
            width: 50%;
            height: 100%;
            background: linear-gradient(45deg, yellow, red, transparent);
            color: white;
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</body>

</html>

In the above example div1 class has a plain background where div2 class uses linear-gradient() with which we were able to achieve the transformation.

Here is complete video explaining linear-gradient() function and repeating-linear-gradient() which will see in an another post.

If you i’m using CSS Flexbox to achieve the side by side window view, if you want to see how you can achieve here is the tutorial for it Flexbox Basics .

CSS Flexbox Properties Guide Part 1

In this post we will see different CSS Flexbox properties of , their uses and how you can make your UI more flexible.

CSS Flexbox / Flexbox layout module is a useful module which helps in layout , alignment of elements in a container. The basic idea is to give the container (Flex container) the ability to alter the items (flex items) height & width accordingly.

These are the different properties of Flexbox we will be discussing in this tutorial.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • align-self
  • flex-order
  • flex-shrink
  • flex-grow
  • flex-basis

In order to make your container a flex container you need to add the property
display: flex;

.container {
display: flex;
}

flex-direction: flex-direction property is used to align the children of the flex container in four different ways row, column, row-reverse, column-reverse. we will see how each of them aligns the flex items in the container. You define it by using the property flex-direction like below.

.container {
display: flex;
flex-direction: row;
}

flex-direction demo

The above gif shows how flex-direction row and column effects the flex items inside the flex container.

Below is the demonstration of remaining flex-direction properties reverse and column-reverse, either of them would just reverse the order of the flex-items in the flex-container. The below gif show how the order 1-5 is reversed to 5-1 when used flex-direction: row-reverse.

flex-direction demo