css gradients [+30 Examples]

Tuesday 10th, Jan, 2023 | # #

CSS gradients allow you to create smooth transitions between multiple colors on a web page. Using CSS gradients, you can create a wide variety of effects, from subtle background color changes to more dramatic effects like gradients that change as you scroll down a page. CSS gradients can be applied to many elements on a web page, including backgrounds, borders, and text. You can create gradients using the CSS linear-gradient and radial-gradient functions, which provide a wide range of options for customizing the direction, size, and shape of the gradient. With the right CSS gradient techniques, you can create visually striking effects that add depth and interest to your website.

Creating a CSS gradient is a simple process that can be accomplished using the background or background-image property. Here's a step-by-step tutorial on how to create a basic linear gradient:

  1. Start by deciding on the colors you want to use for your gradient. You can use any valid CSS color values, such as hex codes, RGB or RGBA values, or color names. For this example, we'll use the colors #ff0000 (red) and #0000ff (blue).

  2. Next, use the background or background-image property in your CSS and set it to the linear-gradient function. The basic syntax for the linear-gradient function is as follows:

 
background: linear-gradient(direction, color1, color2);
  1. Within the linear-gradient function, specify the direction of the gradient using an angle value (in degrees) or one of the keywords to top, to right, to bottom, or to left. For this example, we'll use the keyword to bottom to create a gradient that starts at the top and goes to the bottom.
 
background: linear-gradient(to bottom, #ff0000, #0000ff);
  1. Finally, apply this CSS to the element that you want to have the gradient background.
 
<div class="gradient-bg">
    This div has gradient background
</div>

 
.gradient-bg {
    width: 300px;
    height: 200px;
    background: linear-gradient(to bottom, #ff0000, #0000ff);
}

And now you have a simple CSS gradient!

You can add multiple color stop by adding more color values in the linear-gradient function, This allows you to control the color of the gradient at specific points along the gradient line.

 
background: linear-gradient(to bottom, #ff0000, #00ff00, #0000ff);

This would result in a gradient that goes from red at the top, to green in the middle, and blue at the bottom.

You can also change the angle of the linear gradient, for example, instead of to bottom to to left and it would change the direction of the gradient, going horizontally from left to right.

You can also apply radial gradient by replacing the linear-gradient by radial-gradient, which provides options to control the shape and size of the gradient.

 
background: radial-gradient(circle, #ff0000, #0000ff);

Radial gradient have different syntax, first argument is the shape of the gradient (circle or ellipse) and the second and so on are the color stops.

Try experimenting with different color values, directions, and shapes to create a variety of gradient effects on your website.



Close X

Best Vector Post