CSS Snippet Cheatsheet

Ever find CSS stylings you want to save for future use? I created this page to collect and share some snippets that caught my eye. Click on any of them, and it will highlight the whole snippet for you to copy!

Flexbox Row

Create a flexbox arranged in rows.

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

Flexbox Column

Create a flexbox arranged in a column.

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

CSS Grid Layout

Create a grid layout with 12 columns

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

Linear Gradients

Set a linear color gradient as a 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

Create a glow effect 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

Offset the title above the top of an card-type element.

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