Skip to content

The State of CSS 2021

[en-US] general.back_to_intro

Shapes & Graphics

Controlling the shape and display of elements.

CSS Shapes

Customize Data
CSS Shapes describe geometric shapes for use in CSS. For the Level 1 specification, CSS Shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.
Never heard of it
Know about it
Have used it
2019
2020
2021

object-fit

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

clip-path

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

CSS Masks

Customize Data
CSS Masking is a CSS module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.
Never heard of it
Know about it
Have used it
2019
2020
2021
💡

The Share tab makes it easy to share any chart, or even download it as an image.

Blend Modes

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

CSS Filter Effects

Customize Data
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.
Never heard of it
Know about it
Have used it
2019
2020
2021

backdrop-filter

Customize Data
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
Never heard of it
Know about it
Have used it
2020
2021

color-gamut

Customize Data
The color-gamut CSS media feature can be used to test the approximate range of colors that are supported by the user agent and the output device.
Never heard of it
Know about it
Have used it
2020
2021

perspective

Customize Data
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
Never heard of it
Know about it
Have used it
2020
2021

Intrinsic Sizing

Customize Data
The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.
Never heard of it
Know about it
Have used it
2021

conic-gradient()

Customize Data
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
Never heard of it
Know about it
Have used it
2021

color()

Customize Data
The color() functional notation allows a color to be specified in a particular, specified colorspace rather than the implicit sRGB colorspace that most of the other color functions operate in.
Never heard of it
Know about it
Have used it
2021

accent-color

Customize Data
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
Never heard of it
Know about it
Have used it
2021

Recommended Resources

SVG Essentials & Animation, v2

SVG Essentials & Animation, v2

Learn to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites. I
Thanks to our partners for supporting us! Learn more.