CSS Snippet Cheat Sheet

Random log of favorite CSS syntaxes :) 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

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

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