30:[] 2e:{"title":"css mix-blend-mode","cells":[{"id":0,"value":"# css mix-blend-mode\n\nThe mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. [[source](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)]\n\nThe below example is rendered with HTML divs that are rounded, and another version does the same but uses SVG elements\n","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"viewof blend = Inputs.select([\"normal\", \"screen\", \"multiply\", \"overlay\", \"darken\", \"lighten\", \"color-dodge\", \"color-burn\", \"hard-light\", \"soft-light\", \"difference\", \"exclusion\", \"hue\", \"saturation\", \"color\", \"luminosity\"], {label: \"Select mix-blend-mode:\", value: \"screen\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof circle1 = Inputs.color({label: \"circle 1\", value: \"#f20000\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof circle2 = Inputs.color({label: \"circle 2\", value: \"#00d973\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof circle3 = Inputs.color({label: \"circle 3\", value: \"#0d75ff\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"\n\n

\n","pinned":true,"hidden":false,"mode":"html"},{"id":10,"value":"viewof radius = Inputs.range([80, 360], {label: \"Radius:\", step: 1, value: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"----\n\nsvg version of the same:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}