Surveys / State of CSS 2023
This survey closed on July 15, 2023. View Survey Results »

2/13Shapes & Graphics

  1. Blend Modes
  2. CSS Filter Effects
  3. backdrop-filter
  4. linear() Easing Function
  5. Intrinsinc Sizing Keywords
  6. conic-gradient()
  7. View Transition API

mix-blend-mode, background-blend-mode, isolation

css 
.item2 {
  color: #000;
  mix-blend-mode: overlay;
}

blur(), brightness(), contrast()…

css 
.image{
  filter: contrast(175%) blur(5px)
}

css 
.box {
  backdrop-filter: blur(10px);
}

css 
:root {
  --bounce-easing: linear(
    0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
  );
}

min-content, max-content, fit-content

css 
h2 {
  width: max-content;
}

css 
.blue-to-red {
  background: conic-gradient(from 45deg, blue, red);
}

css 
::view-transition-old(main-image),
::view-transition-new(main-image) {
  transform-origin: right top;
}

::view-transition-new(main-image) {
  animation: 400ms ease-out both grow;
}

figure {
  view-transition-name: main-image;
}