Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
We recommend enlisting a professional web developer to work with Code Injection—Readymag support won’t be able to assist with custom code issues.
With blending modes, a layer on top can be used to modify what underlying content looks like. Let’s try it with a Text widget and a Picture below it:
- Upload an image via the Picture widget and add a Text widget on top of it. Select a suitable color for your text (we’ll make it white).
- Find the ID of your text widget as shown here.
- Add a Code widget and paste this code into the CSS tab. Don’t forget to replace the fragment
"PASTE WIDGET ID HERE"with the ID from step 2, but keep the quotation marks.
The following code will work on Desktop layout only.
[data-id="PASTE WIDGET ID HERE"] {
mix-blend-mode: difference;
}
There are more than a dozen blending modes in the CSS specification. Learn more about the mix-blend-mode property in MDN Web Docs.