CSS Snippet Cheatsheet

Ever have trouble recalling the exact syntax for your favorite CSS it a permanent home and add it to this page! Select any snippet below and it`ll automatically select all of the code for you to copy.

Flexbox Row

Use these three properties to create a Flexbox row layout


    .row{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
      }

Flexbox Column

Use this to create a Flexbox column layout.



  .column{
   display:flex;
   flex-direction:column;
 }

CSS Grid Layout

use these three to create a Flexbox row layout



 .grid {
    display:grid;
    width:100%;
    grid-template-columns:
repeat(12, 1fr);
 }

Linear Gradients

This will create a background linear gradient from top to bottom.


 .linear-gradient-background {
   background-image: linear-gradient(
    rgba(232 , 102 ,236 , 0,3) 0%,
    rgba(232, 102 ,236, 0,6) 100%
   );
 }

Box transition hover

Use transition and box shadows to glow on hover


.code-card .card-header {
   border-radius:8px;
   transition: all 0.5s ease-in-out;
}
.code-card:hover,
.code-card:hover .card-header{
    box-shadow: inset 0px 0px 8px 
rgba(232, 102, 236 1) 0 0 15px
rgba(232, 102, 236 1);
}

Overlay Card with Title

Use position properties and negative margin to raise elements higher than their natural starting poin.



.card-header {
position:relative;
margin-top: -20px;
 }