CSS opacity for linear-gradient background?

Maximilian

I have a div which has a background of:

background: linear-gradient(120deg, #6971a2 0%, white 80%);

I'd like to add opacity functionality to this background whilst not affecting the text inside the div.

I'm aware of RGBA. However, I'm fairly sure linear-gradient cannot be used with it?

Thanks!

Jacob Ford

You may use any CSS <color> as a stop on a a linear-gradient, including #hexa and rgba() which allow you to gradate between opacities.

The transparency of an element’s background (or its background gradient) will have no effect on its content.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-5

Comments

0 comments

How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS

Background image linear-gradient animate opacity smoothly

Hiding effect of block of text with image as background! linear gradient of opacity?

blurred linear gradient background to solid color Css

Css background: offset for repeating-linear-gradient

Linear gradient for more than just CSS background?

CSS Text Shadow Overrides the Background Linear Gradient

css hover to clear linear gradient on background failed

setting opacity 30% to a linear gradient

CSS button transition linear-gradient background into transparent background

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

Radial gradient opacity on background image

How to combine linear gradient in background image, opacity and text color change on hover?

Apply linear gradient to background

CSS - Change background image without affecting linear gradient?

CSS Background Image Linear Gradient showing unwanted border in Chrome

CSS - linear-gradient does not work in the background property

How to create semi transparent linear gradient background and border using css?

Background-position not working with CSS animation and linear gradient

background screen splits when using linear gradient css html

css linear-gradient background CPU high usage

CSS fading-transition background: linear gradient, does not work

How to create a polka dot texture with linear gradient as background in css?

Can I add linear gradient to background color of a text in css

CSS Linear gradient is inaccurate?

CSS linear gradient with separations

CSS Background Opacity

change background opacity with CSS

Css Background Color Opacity

TOP Ranking

Article

CSS opacity for linear-gradient background?

CSS opacity for linear-gradient background?

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

How to import an asset in swift using Bundle.main.path() in a react-native native module

Inner Loop design for webscrapping

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Execute ./script.sh with a crontab

Converting a class method to a property with a backing field

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

How to update azerothcore-wotlk docker container

How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?

Grails with Oracle thick OCI driver authenticate to Oracle with wrong user

How to pass data to the ng2-bs3-modal?

Making Array From Page Elements in jQuery

Retrieve Element Tag Value XML Using Bash

Laravel's ORM sync with timestamps doesn't update timestamps

Do animations stop css changes after animation completion?