gradient |transition| linear gradient |bg gradient css

CSS gradients are a way to display smooth transitions between two or more specified colors. They are a powerful tool for applying dynamic effects on web pages. To apply gradient we have to use background image.

There are three primary types of gradients

Linear gradient : creates a smooth transition between colors along a straight line also we can give the direction i.e starting and ending point
Radial gradient: creates a circular transition of colors, emanating from a central point ,create a smooth transition of colors from the center of a circle to its perimeter.
Conic gradient :It provide a circular color transition similar to radial gradients, but instead of radiating from a central point, they rotate around a center point.

In all we can apply many combinations in these gradients.

code to demonstrate it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gradient</title>
  </head>
  <body>
    <style>
      .grad {
        height: 450px;
        /* background-image: linear-gradient(red, yellow); */
        /* background-image: linear-gradient(to left,red, yellow); */
        /* background-image: radial-gradient(circle,blue,red, yellow); */
        /* background-image: repeating-radial-gradient(red 10%, yellow 20%,blue 25%); */
        background-image: conic-gradient(red 200deg, blue, green);
        /*background-image: radial-gradient(ellpise at top, red, transparent),
          radial-gradient(ellpise at bottom, rgb(215, 233, 11), transparent);*/
      }
    </style>
  </body>
  <div class="grad"></div>
</html>

Transitions:

This allows us to change the property values smoothly over a defined duration .This creates a more visually appealing and engaging experience for the user. We can do transitions in almost all properties of css.

Timing Function: Defines the acceleration curve of the transition.
Delay : Delays the start of the transition for the time specified.

code to demonstrate transition:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        div{
            height: 100px;
            width: 150px;
            background-color: aqua;
            transition: width 3s, height 4s;
            transition-timing-function: ease-out;
            transition-delay: 3s;
        }

        div:hover{
            width:200px;
            height:200px ;

        }
    </style>
</head>
<body>
    <div></div>
    <p title="helo">name</p>
</body>
</html>

lt.18: https://hashnode.com/post/clp2q7d36000809lb62ny991i

Gradients / transition in css (lt.19)

Transitions:

Subscribe to my newsletter

himanshu

himanshu