CSS – CSS3 opacity gradient

CSS permits its users to apply various effects on the content in HTML. One such gradient is the opacity gradient, which normally consists of one color fading into another. However, with CSS, users have complete control over the transition, from the color to the orientation. The “linear-gradient()” is the most popular and practical gradient type.

This write-up will demonstrate:

• What is Opacity Gradient?
• How to Set CSS3 Opacity Gradient?

What is Opacity Gradient?

Gradients are the CSS element in the form of image data type that depicts a modification in color among two or more shades. These modifications are represented as either radial or linear transitions. Gradients can be utilized everywhere an image could be because these are in the form of image data type. Gradients are most frequently used as backgrounds for elements.

How to Set CSS3 Opacity Gradient?

To set the opacity gradient in CSS, try out the following instructions.

Step 1: Create div Container

First, create a div container with the help of the “<div>” element and add an “id” attribute with a particular name.

Step 2: Add Data to Paragraph

Next, utilize the “<p>” tag and insert a class attribute inside the paragraph opening tag. Then, assign a specific name to the class according to your choice. After that, embed the text in between the paragraph tag:

Output

Step 3: Style the div Container

Access the div container by using the class name with the class selector as “#main-content”:

Then, apply the below listed CSS properties:

• “background-color” is utilized for setting the color at the backside of the element.
• “margin” allocates space on the outer side of the defined boundary.
• “border” property is used for determining a border around the defined element.

Step 4: Style Paragraph

Now, style the paragraph by accessing it with the class name “.paragraph-1”:

Here:

• “color” property allocates a color to the text inside the paragraph.
• “overflow” is utilized for showing the results when content spills from an element’s box. This property determines whether to grab text or add scrollbars when such an element’s content is lengthy to set in a particular area.
• “position” sets the position of the element in a document.
• “mix-blend-mode” CSS property is utilized for setting an element’s content mixed with the element’s root content and background.
• “font-size” is used to define a particular font for the text in the paragraph.

Step 5: Set “linear-gradient” on Paragraph

Utilize the “.paragraph-1” to access the class “:after”:

According to the given code snippet:

• “position” is set as absolute in this snippet.
• “left” and “top” properties are used for setting the position of the element at the left and top sides.
• “background” property set as “linear-gradient” creates a background consisting of an ongoing transition among different colors with a straight line.
• “content” property is utilized for setting the content.
• “width” allocates the element’s width.
• “height” property is utilized for setting the height of the defined element.
• “pointer-event” specifies the conditions under which a certain visual element became the event’s target

Output

It can be noticed that the CSS opacity gradient has been applied successfully.

Conclusion

To set the opacity gradient, first, add text in the paragraph by using the “<p>” tag. Then, access the paragraph and apply the “background” CSS property, and set the value of this property as “linear-gradient”. It creates a background consisting of a progressive transition between two or more colors along a straight line. This write-up has explained the CSS opacity gradient.