CSS Cheat Sheet

A useful tool for keeping track of common CSS tricks. Click any snippet of code and it will automatically select all of it for you to copy!

Flexbox Row

Use these properties to create a Flexbox row layout.
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Flexbox Column

Use these properties to create a Flexbox column layout.
.column {
display: flex;
flex-direction: column;
}

CSS Grid Layout

Build a 12-column layout using CSS Grid.
.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 Glow

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 properties and negative margins to raise elements higher than their natural starting point.
.card-header {
position: relative;
margin-top: -20px;
}