CSS Tricks for 2022

CSS Blend Mode

body {
 background-image: url(....);
 background-color: #00ce2d;
 backgound-blend-mode: screen;
}

Clipping

e.g on stripe

body > #bg{
 height:100%
 width:100%
 background-color: rgb(2,211,248);
 clip-path:polygon(100% 1%,100% 49%, 49% 99%,0 99%,0 0);
 position:absolute;
 z-index:-1;
}

Use clip-path maker online tools

bennettfeely.com/clippy

Animations

@keyframes blink {
 0%{
  background:violet;
 }
 15%{
  background:indigo;
  100%{
   background:violet;
  }
 }
@-webkit-keyframes blink {
 0%{
   background:violet;
 }
 15%{
   background:indigo;
   100%{
     background:violet;
  }
}
div{
 height: 500px;
 width:500px;
 border:1px solid black;
 animation: blink 10s infinite;
 -webkit-animation : blink 10s infinite
}

Fonts

fonts.google.com

select style and embed it to your page

Gradients

body {
background: 
 background: radial-gradient(
            circle,
               rgba() 10%,
               rgba() 100%,
}

CSS gradient generators e.g cssgradient.io