CSS Snippet Cheatsheet

Ever have trouble recalling the exact syntax for your favourite CSS code? Give it a permanent home and add it to this page! Select any snippet below and it will automatically select all the code for you to copy.

Flexbox Row

Use these 3 properties to create a Flexbox row layout.

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

Flexbox Column

Use this style to create a flexbox xolumn layout.

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

CSS Grid Layout

Build a 3 column layout using CSS grid.

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

Linear Gradients

Create a linear gradient background.

.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 and negative margins to raise elements higher than their natural starting point.

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