Implementation of CSS linear gradient concave rectangle transition effect

This article discusses the difficulties and ideas of the linear gradient concave rectangle transition effect. It mainly introduces the implementation of concave rectangle, adding linear gradient to concave rectangle, and the transition of linear gradient background color. If you have a better implementation solution, please feel free to discuss with me in the comment section.

Above

Implementing a concave rectangle

The inspiration for implementing this style comes from an article on the Internet that uses CSS to achieve concave corners. It describes how to achieve the concave corner effect of Chrome tabs, which is roughly as follows:

Use radial-gradient gradient to achieve this. Reduce the blur distance of the gradient to 0 to see a clear circular boundary. Following this idea, we can achieve the style of a concave rectangle. By adjusting position of the gradient to control the position of the center point, and adjusting the size of the radial circle to control the curvature of the concave surface, as shown below:

You can debug it in the radial gradient demo on MDN:

background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);

Small details

1. If the blur distance of the radial gradient is 0, you will see obvious jagged edges on the circular border. Increasing the blur distance by 1px can eliminate the jagged edges. (Is this the legendary anti-aliasing?)
2. Android 4.4.4 is not compatible with radial gradients.

Concave rectangle with linear gradient

In the previous section, we have implemented a concave rectangle. So how do we set a linear gradient for the concave rectangle? The background is already in use. You cannot set both radial and linear gradients.

You can use mask-image to achieve the effect of cutting out the image. Here is an example from MDN:

The MDN example uses a five-pointed star svg to cut out a green five-pointed star on a green background. To achieve a gradient concave rectangle, you can use a concave rectangle shape to cut out a linear gradient background.

Use mask-image to set the shape and background to set the linear gradient:

.xxx {
  background: linear-gradient(115deg, #ff66ff, #4db8ff);
  mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);
}

Effect:

Small details

Mask-image is more compatible than radial gradient on mobile devices, and is supported by Android 4.4.4.

Gradient background color transition

Background-image itself does not support transition animation, but it can be achieved through some fancy operations. Teacher Zhang Xinxu’s article explains it in great detail:

https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/

Background-image does not support transition animation, but opacity does. Add another pseudo-element on the previous linear gradient concave rectangle, set the background color of the pseudo-element to another linear gradient color, and then control the opacity of the pseudo-element to achieve a linear gradient transition effect.

This concludes this article about the implementation of CSS linear gradient concave rectangle transition effect. For more relevant CSS linear gradient concave rectangle transition content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!