Shapes & Graphics
For the longest time, creating advanced graphic effects on the web has either required a lot of upfront work in graphics editor apps, or else just plain not been possible.
But now, with wider support for masking, blend modes, filters, and more, effects that previously seemed impossible are just a couple lines of code away. Best of all: because they're now achievable through pure CSS, you don't have to give up on accessibility and adaptability anymore.
Usage Overview
The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.
Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.
Usage by Years Of Experience
The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.
A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.
Shapes
CSS Shapes describe geometric shapes for use in CSS. For the Level 1 specification, CSS Shapes can be applied to floating elements.
Learn More
object-fit
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
Learn More
clip-path
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Learn More
Masking
CSS Masking is a CSS module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.
Learn More
blend-mode
The <blend-mode> CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
Learn More
Filters & Effects
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.