Css Gradient

What is Gradient in CSS?

Gradients are used so that the form is solicited between the two or more colors.

Gradients can work in backgrounds, text, border, and much more. Linear gradients are presented as linear gradients with their own specific features whereas radial gradients have other set of features.

Linear Gradient:

This example creates a linear gradient background for a div, transitioning from #3498db (blue) to #ffffff (white) from left to right.

                          
                            div {
                              background: linear-gradient(to right, #3498db, #ffffff); /* Left to right gradient from blue to white */
                          }

Linear Gradient with Angles:

This example creates a linear gradient background at a 45-degree angle.

                          
                            div {
                              background: linear-gradient(45deg, #3498db, #ffffff); /* 45-degree angle gradient */
                          }

Linear Gradient with Color Stops:

This example adds color stops to the linear gradient, specifying different colors at different positions (0%, 50%, and 100%).

                          
                            div {
                              background: linear-gradient(to right, #3498db 0%, #ffffff 50%, #2ecc71 100%); /* Gradient with color stops */
                          }

Repeating Linear Gradient:

This example creates a repeating linear gradient with a pattern of blue and white.

                          
                            div {
                              background: repeating-linear-gradient(to right, #3498db, #3498db 20px, #ffffff 20px, #ffffff 40px); /* Repeating linear gradient */
                            }

Radial Gradient:

This example creates a radial gradient background, transitioning from blue to white.

                          
                            div {
                              background: radial-gradient(circle, #3498db, #ffffff); /* Radial gradient from blue to white */
                          }

Radial Gradient with Shape and Size:

This example creates a radial gradient with an ellipse shape centered at the middle.

                          
                            div {
                              background: radial-gradient(ellipse at center, #3498db, #ffffff); /* Radial gradient with an ellipse shape */
                          }

Repeating Radial Gradient:

This example creates a repeating radial gradient with a pattern of blue and white.

                          
                            div {
                              background: repeating-radial-gradient(circle, #3498db, #3498db 10px, #ffffff 10px, #ffffff 20px); /* Repeating radial gradient */
                          }

Gradient as Text Color:

This example applies a gradient background to text using the background-clip property.

                          
                            h1 {
                              background: linear-gradient(to right, #3498db, #ffffff); /* Gradient background for text */
                              -webkit-background-clip: text; /* Apply gradient to text */
                              color: transparent; /* Hide the actual text */
                          }

Diagonal Gradient Border:

This example applies a diagonal gradient as a border to a div.

                      
                        div {
                          border: 5px solid;
                          border-image: linear-gradient(45deg, #3498db, #ffffff); /* Diagonal gradient border */
                          border-image-slice: 1; /* Ensure the entire border is covered by the gradient */
                      }