Develop Reference

how can i make a circle that fades in trasparency

I want to make an earthquake effect by using transparent-insides circles that rapidly get bigger, is there a way to do this instead of making circles with different alphas 100s of times? I have already searched this up but it only gave me fully transparent circles

Have you tried using gradients?
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);

More control over colors in mix-blend mode

I've been trying all day to find a solution to colorize text when a slanted element is over it. I have partially solved this with mix-blend-mode. But I don't like that you don't have a full control over the colors.
The buttons should be available in many different colors and you have to be able to clearly define what color the text should have and what color it should get when the element moves over it.
I have created a Stackblitz here. With a yellow background, the text should be black and become white when the element is placed over it, this does not seem to be possible with mix-blend-mode.
Does anyone have an idea? In worst case is a js solution also fine for me.
https://stackblitz.com/edit/mix-blend-mode-text-color?file=styles.scss

I have not found a suitable answer using mix-blend-mode but, depending on your use case, you may be able to get the required effect using background clip and linear gradients as you will have absolute control over the colors.
This is a simple snippet which just does the styling for the text and background to give the idea:
button {
background-image: linear-gradient(-45deg, #f7ff14 0, #f7ff14 50%, black 50%, black 100%);
}
button span {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(-45deg, black, black 50%, white 50%, white 100%);
color: transparent;
}
<button>
<span>Weiter</span>
</button>

Notable spacing in rendering SVG in edge(chakra), firefox vs chrome | skewed layout

So I have this tricky layout that's giving me headaches.
I've placed few triangles (using svg polygon) and they seem to work fine in Chrome, but bug out a bit in Edge & Firefox.I tried using border and box-shadow to hide it, but it doesn't seem to help.
Is there any way to hide the white gaps? (on grey, orange and blue parts) (If you don't see them at first - try to resize the window a bit and it'll snap at some point)
#update2: setting borders for adjactent div looks like a workaround for now
I've also tried using a single css clip-path with a polygon that's shapped like a trapezoid, but it's not widely supported. The other thing i tried is to use css transform skew(), but I found it troublesome to position properly, as the following sections have to move accordingly to the side to match the degree of skew.
If you at least think there's a better solution to make this, please give me a hint and I'll try it out.
Here's the code for the version with svg triangles:
And for the clip-path version:
And the skew version:
#edit1
I've discovered that setting a gradient could help, but it leaks out on the corner...
background: linear-gradient(left,
rgb(253, 96, 64) 0%
rgba(255,255,255,0.8) 8px,
rgba(255,255,255,0) 100%)
#edit2
Changing the div neighbouring to the triangle to:
border-right: 1px solid rgb(253, 96, 64);
position: relative;
margin-right: -1px;
seems to be a good workaround. I've updated it in the sandbox.

Blending 2 elements background colors using CSS

I need to blend the background colors of 2 elements using CSS
I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.
I need to achieve something like this -
I have been searching a lot but haven't been able to figure it out.
Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas.
Is it possible to do the same thing using CSS?
EDIT
The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend.
http://jsfiddle.net/fmgfsr4o/2/

You can combine CSS multiple background with radial-gradients to achieve this effect:
CSS
div {
/* adjust the width of the container to adjust circle's
overlap size and shape */
width: 80px;
height: 50px;
/* for debug purpose only */
border: solid blue 1px;
background:
/* draw the red circle */
radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
/* draw the green circle */
radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
/* the red on the left, the green on the right */
background-position: top left, top right;
/* you can make then bigger or smaller */
/* but you have to change width size above too */
background-size: 50px 50px;
/* You want both circles to appears once only */
background-repeat: no-repeat;
/* you can try with other values too */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */
background-blend-mode: multiply;
}
HTML
<div></div>
I have done a JSFiddle for you to try: http://jsfiddle.net/pomeh/07nLpwwj/
This is the result I get using Firefox 31:
Even if the browser support seems "correct" (see here http://caniuse.com/#feat=css-backgroundblendmode), please note that the background-blend-mode property has the Candidate Recommendation status for now, so be careful when using it (thanks to #Paulie_D for pointing that out).

Try this pure CSS3, although you will need to figure out how to position the circles.
html {
height: 100%;
background:
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
tomato 1em,
tomato 4.5em
),
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
dodgerblue 3.5em,
dodgerblue 4.5em
);
background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
0 0,
5em 5em,
10em 5em;
}
JSFiddle

Can you create gradients that fade to opacity using CSS or JavaScript?

WebKit has introduced the ability to create CSS gradients. For example, with the following code:
-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
However, is it possible to have an opacity gradient using CSS? I want the gradient to be a single color on one side, and fade to zero opacity on the other.
Cross-browser compatibility isn't important; I just need it to work in Google Chrome.
Is there some way to do this using CSS? If not, can something similar be done using JavaScript (not jQuery)?
Thanks for your help.

Yes
for the colors, use rgba(x, y, z, o) where o is the opacity
should work
e.g.
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
Edit:
For the final value (opacity) 1 is opaque & 0 is transparent

Yup, rgba(red, green, blue, alpha) is what you should use http://www.w3.org/TR/css3-color/#rgba-color, example (Try it out on jsFiddle):
/* Webkit */
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgba(0,0,0,0.0)), /* Top */
color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);
/* Gecko */
background: -moz-linear-gradient(
center bottom,
rgba(0,0,0,1.0) 0%, /* Bottom */
rgba(0,0,0,0.0) 100% /* Top */
);

not tested, but this should work (in FF this works (with a different syntax) - i'm not sure if safari/webkit knows rgba):
-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));