FREEFORMATTER.COM
Search tools...
Free Online Tools For Developers
Buy Me A Coffee
Formatters
XML Formatter
JSON Formatter
HTML Formatter
SQL Formatter
Validators
XML Validator
JSON Validator
HTML Validator
XPath Tester
Credit Card Number Generator & Validator
Regular Expression Tester
Java Regular Expression Tester
Cron Expression Generator (Quartz)
Converters
XSD Generator
XSLT (XSL Transformer)
XML to JSON Converter
JSON to XML Converter
CSV to XML Converter
CSV to JSON Converter
YAML to JSON Converter
JSON to YAML Converter
Epoch Timestamp To Date
Encoders / Cryptography
Url Encoder & Decoder
Base 64 Encoder & Decoder
Convert File Encoding
Message Digester (MD5, SHA-256, SHA-512)
HMAC Generator
QR Code Generator
Code Minifiers / Beautifier
JavaScript Beautifier
JavaScript Minifier
CSS Beautifier
CSS Minifier
String Escaper & Utilities
String Utilities
HTML Escape
XML Escape
Java and .Net Escape
JavaScript Escape
JSON Escape
CSV Escape
SQL Escape
Web Resources
Lorem Ipsum Generator
List of MIME types
HTML Entities
Url Parser / Query String Splitter
I18N Standards / Code Snippets

CSS Beautifier
Code Minifiers - Beautifier
CSS Beautifier
Formats a CSS files with the chosen indentation level for optimal readability. Supports 4 indentation levels: 2 spaces, 3 spaces, 4 spaces and tabs.

Option 1: Copy-paste your CSS here
jdp-overlay {
    height: 0;
    width: 0
}

@media only screen and (max-width:481px) {
    jdp-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background-color: rgba(0,0,0,.3);
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%
    }
}

jdp-container {
    -moz-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    -webkit-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.24);
    direction: rtl;
    display: none;
    max-width: 307.875px;
    min-width: 307.875px;
    overflow: hidden;
    padding: .5rem 0;
    position: absolute;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media only screen and (max-width:481px) {
    jdp-container {
        -moz-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        -webkit-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        border-radius: 4px 4px 0 0;
        bottom: 0 !important;
        left: 50% !important;
        max-width: 100%;
        min-width: 280px;
        top: unset !important;
        transform: translateX(-50%) !important;
        width: 100%
    }
}

jdp-container, jdp-container *, jdp-container :after, jdp-container :before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    jdp-container .jdp-icon-minus, jdp-container .jdp-icon-plus {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        flex: none;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        vertical-align: middle
    }

        jdp-container .jdp-icon-minus svg, jdp-container .jdp-icon-plus svg {
            height: 1.5rem;
            padding: .25rem;
            vertical-align: middle;
            width: 1.5rem
        }

        jdp-container .jdp-icon-minus.not-in-range, jdp-container .jdp-icon-plus.not-in-range {
            cursor: not-allowed
        }

            jdp-container .jdp-icon-minus.not-in-range svg, jdp-container .jdp-icon-plus.not-in-range svg {
                opacity: .3
            }

    jdp-container .jdp-months, jdp-container .jdp-years {
        fill: rgba(0,0,0,.9);
        color: rgba(0,0,0,.9);
        display: -webkit-inline-box;
        display: -webkit-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 120%;
        margin: 0 2.5%
    }

    jdp-container .jdp-months {
        width: 50%
    }

    jdp-container .jdp-years {
        width: 40%
    }

    jdp-container .jdp-month, jdp-container .jdp-month input, jdp-container .jdp-month select, jdp-container .jdp-time, jdp-container .jdp-time input, jdp-container .jdp-time select, jdp-container .jdp-year, jdp-container .jdp-year input, jdp-container .jdp-year select {
        background: #fff;
        border: none;
        border-radius: 0;
        color: inherit;
        display: inline-block;
        font-family: inherit;
        font-size: inherit;
        font-weight: 300;
        height: auto;
        line-height: inherit;
        margin: 0;
        outline: none;
        padding: 0;
        text-align: center;
        vertical-align: initial;
        width: 100%
    }

        jdp-container .jdp-month:active, jdp-container .jdp-month:focus, jdp-container .jdp-month input:active, jdp-container .jdp-month input:focus, jdp-container .jdp-month select:active, jdp-container .jdp-month select:focus, jdp-container .jdp-time:active, jdp-container .jdp-time:focus, jdp-container .jdp-time input:active, jdp-container .jdp-time input:focus, jdp-container .jdp-time select:active, jdp-container .jdp-time select:focus, jdp-container .jdp-year:active, jdp-container .jdp-year:focus, jdp-container .jdp-year input:active, jdp-container .jdp-year input:focus, jdp-container .jdp-year select:active, jdp-container .jdp-year select:focus {
            outline: none
        }

        jdp-container .jdp-month input option, jdp-container .jdp-month option, jdp-container .jdp-month select option, jdp-container .jdp-time input option, jdp-container .jdp-time option, jdp-container .jdp-time select option, jdp-container .jdp-year input option, jdp-container .jdp-year option, jdp-container .jdp-year select option {
            font-size: 95%;
            min-height: 1.3rem;
            outline: none;
            padding: 0
        }

        jdp-container .jdp-month:hover, jdp-container .jdp-time:hover, jdp-container .jdp-year:hover {
            filter: brightness(.9)
        }

        jdp-container .jdp-month input, jdp-container .jdp-time input, jdp-container .jdp-year input {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            cursor: text
        }

            jdp-container .jdp-month input::-webkit-inner-spin-button, jdp-container .jdp-month input::-webkit-outer-spin-button, jdp-container .jdp-time input::-webkit-inner-spin-button, jdp-container .jdp-time input::-webkit-outer-spin-button, jdp-container .jdp-year input::-webkit-inner-spin-button, jdp-container .jdp-year input::-webkit-outer-spin-button {
                -webkit-appearance: none
            }

        jdp-container .jdp-month select, jdp-container .jdp-time select, jdp-container .jdp-year select {
            -webkit-appearance: menulist;
            -moz-appearance: menulist;
            cursor: pointer;
            position: relative
        }

    jdp-container .jdp-days {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        justify-content: space-around;
        outline: 0;
        padding: .5rem 0 0;
        text-align: left;
        width: 100%
    }

    jdp-container .jdp-day, jdp-container .jdp-day-name {
        background: none;
        border: 1px solid transparent;
        color: rgba(0,0,0,.9);
        display: inline-block;
        flex-basis: 14.2857143%;
        font-weight: 400;
        height: 31px;
        justify-content: center;
        line-height: 31px;
        margin: 2px 0;
        position: relative;
        text-align: center;
        width: 14.2857143%
    }

        jdp-container .jdp-day-name.today, jdp-container .jdp-day.today {
            border-color: rgba(0,0,0,.3)
        }

        jdp-container .jdp-day-name.selected, jdp-container .jdp-day.selected {
            background-color: #569ff7 !important;
            color: #fff !important;
            opacity: 1 !important
        }

        jdp-container .jdp-day-name.holly-day, jdp-container .jdp-day-name.last-week, jdp-container .jdp-day.holly-day, jdp-container .jdp-day.last-week {
            color: #f44336
        }

        jdp-container .jdp-day.not-in-month {
            opacity: .4
        }

        jdp-container .jdp-day.disabled-day {
            cursor: not-allowed;
            opacity: .15
        }

        jdp-container .jdp-day:not(.disabled-day) {
            border-radius: 4px;
            cursor: pointer;
            transition: .1s linear
        }

            jdp-container .jdp-day:not(.disabled-day):hover {
                background: rgba(0,0,0,.1);
                transform: scale(1.15);
                z-index: 1
            }

    jdp-container .jdp-day-name {
        background-color: rgba(0,0,0,.1);
        border-radius: 0;
        cursor: default;
        font-size: 90%;
        font-weight: 900
    }

    jdp-container .jdp-footer {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        justify-content: space-between;
        outline: 0;
        padding: .5rem .5rem 0;
        width: 100%
    }

@media only screen and (max-width:481px) {
    jdp-container .jdp-footer {
        margin: .5rem 0
    }
}

jdp-container .jdp-btn-close, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today {
    background: #569ff7;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 90%;
    font-weight: 400;
    padding: .3em .6em;
    text-align: center
}

@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-close, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today {
        font-size: 100%;
        padding: .5em .8em
    }
}

jdp-container .jdp-btn-close.disabled-btn, jdp-container .jdp-btn-empty.disabled-btn, jdp-container .jdp-btn-today.disabled-btn {
    cursor: not-allowed;
    opacity: .2
}

@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-today ~ .jdp-btn-empty {
        margin-left: auto;
        margin-right: 1em
    }
}

jdp-container .jdp-time-container {
    display: flex;
    padding: 0
}

    jdp-container .jdp-time-container .jdp-time {
        flex: auto;
        margin: 0 .5rem;
        position: relative
    }

        jdp-container .jdp-time-container .jdp-time select {
            background: rgba(0,0,0,.03);
            border-radius: 5px;
            padding: .5rem 1rem .5rem 7px
        }

        jdp-container .jdp-time-container .jdp-time:after {
            content: ":";
            font-size: 1.5rem;
            height: 100%;
            position: absolute;
            right: -.7rem;
            top: 50%;
            transform: translateY(-50%)
        }

        jdp-container .jdp-time-container .jdp-time:first-child:after {
            display: none
        }

    jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
        font-size: 1.5rem;
        padding: .8rem 1rem .8rem 7px
    }

    jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
        font-size: 2.3rem;
        position: absolute;
        right: -.8rem
    }

@-webkit-keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes jdpOpenAnimationMobile {
    0% {
        bottom: -10%;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes jdpOpenAnimationMobile {
    0% {
        margin-bottom: -20%;
        opacity: 0
    }

    to {
        margin-bottom: 0;
        opacity: 1
    }
}

Option 2: Or upload your CSS fileNo file chosen
File encoding
UTF-8
Indentation level
Tab delimited


-Beautified CSS-

jdp-overlay {
    height: 0;
    width: 0
}

@media only screen and (max-width:481px) {
    jdp-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background-color: rgba(0, 0, 0, .3);
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%
    }
}

jdp-container {
    -moz-animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    -webkit-animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    animation: jdpOpenAnimation .3s cubic-bezier(.23, 1, .32, 1);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .24);
    direction: rtl;
    display: none;
    max-width: 307.875px;
    min-width: 307.875px;
    overflow: hidden;
    padding: .5rem 0;
    position: absolute;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media only screen and (max-width:481px) {
    jdp-container {
        -moz-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);
        -webkit-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);
        animation: jdpOpenAnimationMobile .3s cubic-bezier(.23, 1, .32, 1);
        border-radius: 4px 4px 0 0;
        bottom: 0 !important;
        left: 50% !important;
        max-width: 100%;
        min-width: 280px;
        top: unset !important;
        transform: translateX(-50%) !important;
        width: 100%
    }
}

jdp-container,
jdp-container *,
jdp-container :after,
jdp-container :before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 99999999 !important
}

    jdp-container .jdp-icon-minus,
    jdp-container .jdp-icon-plus {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        flex: none;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        vertical-align: middle
    }

        jdp-container .jdp-icon-minus svg,
        jdp-container .jdp-icon-plus svg {
            height: 1.5rem;
            padding: .25rem;
            vertical-align: middle;
            width: 1.5rem
        }

        jdp-container .jdp-icon-minus.not-in-range,
        jdp-container .jdp-icon-plus.not-in-range {
            cursor: not-allowed
        }

            jdp-container .jdp-icon-minus.not-in-range svg,
            jdp-container .jdp-icon-plus.not-in-range svg {
                opacity: .3
            }

    jdp-container .jdp-months,
    jdp-container .jdp-years {
        fill: rgba(0, 0, 0, .9);
        color: rgba(0, 0, 0, .9);
        display: -webkit-inline-box;
        display: -webkit-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 120%;
        margin: 0 2.5%
    }

    jdp-container .jdp-months {
        width: 50%
    }

    jdp-container .jdp-years {
        width: 40%
    }

    jdp-container .jdp-month,
    jdp-container .jdp-month input,
    jdp-container .jdp-month select,
    jdp-container .jdp-time,
    jdp-container .jdp-time input,
    jdp-container .jdp-time select,
    jdp-container .jdp-year,
    jdp-container .jdp-year input,
    jdp-container .jdp-year select {
        background: #fff;
        border: none;
        border-radius: 0;
        color: inherit;
        display: inline-block;
        font-family: inherit;
        font-size: inherit;
        font-weight: 300;
        height: auto;
        line-height: inherit;
        margin: 0;
        outline: none;
        padding: 0;
        text-align: center;
        vertical-align: initial;
        width: 100%
    }

        jdp-container .jdp-month:active,
        jdp-container .jdp-month:focus,
        jdp-container .jdp-month input:active,
        jdp-container .jdp-month input:focus,
        jdp-container .jdp-month select:active,
        jdp-container .jdp-month select:focus,
        jdp-container .jdp-time:active,
        jdp-container .jdp-time:focus,
        jdp-container .jdp-time input:active,
        jdp-container .jdp-time input:focus,
        jdp-container .jdp-time select:active,
        jdp-container .jdp-time select:focus,
        jdp-container .jdp-year:active,
        jdp-container .jdp-year:focus,
        jdp-container .jdp-year input:active,
        jdp-container .jdp-year input:focus,
        jdp-container .jdp-year select:active,
        jdp-container .jdp-year select:focus {
            outline: none
        }

        jdp-container .jdp-month input option,
        jdp-container .jdp-month option,
        jdp-container .jdp-month select option,
        jdp-container .jdp-time input option,
        jdp-container .jdp-time option,
        jdp-container .jdp-time select option,
        jdp-container .jdp-year input option,
        jdp-container .jdp-year option,
        jdp-container .jdp-year select option {
            font-size: 95%;
            min-height: 1.3rem;
            outline: none;
            padding: 0
        }

        jdp-container .jdp-month:hover,
        jdp-container .jdp-time:hover,
        jdp-container .jdp-year:hover {
            filter: brightness(.9)
        }

        jdp-container .jdp-month input,
        jdp-container .jdp-time input,
        jdp-container .jdp-year input {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            cursor: text
        }

            jdp-container .jdp-month input::-webkit-inner-spin-button,
            jdp-container .jdp-month input::-webkit-outer-spin-button,
            jdp-container .jdp-time input::-webkit-inner-spin-button,
            jdp-container .jdp-time input::-webkit-outer-spin-button,
            jdp-container .jdp-year input::-webkit-inner-spin-button,
            jdp-container .jdp-year input::-webkit-outer-spin-button {
                -webkit-appearance: none
            }

        jdp-container .jdp-month select,
        jdp-container .jdp-time select,
        jdp-container .jdp-year select {
            -webkit-appearance: menulist;
            -moz-appearance: menulist;
            cursor: pointer;
            position: relative
        }

    jdp-container .jdp-days {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        justify-content: space-around;
        outline: 0;
        padding: .5rem 0 0;
        text-align: left;
        width: 100%
    }

    jdp-container .jdp-day,
    jdp-container .jdp-day-name {
        background: none;
        border: 1px solid transparent;
        color: rgba(0, 0, 0, .9);
        display: inline-block;
        flex-basis: 14.2857143%;
        font-weight: 400;
        height: 31px;
        justify-content: center;
        line-height: 31px;
        margin: 2px 0;
        position: relative;
        text-align: center;
        width: 14.2857143%
    }

        jdp-container .jdp-day-name.today,
        jdp-container .jdp-day.today {
            border-color: rgba(0, 0, 0, .3)
        }

        jdp-container .jdp-day-name.selected,
        jdp-container .jdp-day.selected {
            background-color: #569ff7 !important;
            color: #fff !important;
            opacity: 1 !important
        }

        jdp-container .jdp-day-name.holly-day,
        jdp-container .jdp-day-name.last-week,
        jdp-container .jdp-day.holly-day,
        jdp-container .jdp-day.last-week {
            color: #f44336
        }

        jdp-container .jdp-day.not-in-month {
            opacity: .4
        }

        jdp-container .jdp-day.disabled-day {
            cursor: not-allowed;
            opacity: .15
        }

        jdp-container .jdp-day:not(.disabled-day) {
            border-radius: 4px;
            cursor: pointer;
            transition: .1s linear
        }

            jdp-container .jdp-day:not(.disabled-day):hover {
                background: rgba(0, 0, 0, .1);
                transform: scale(1.15);
                z-index: 1
            }

    jdp-container .jdp-day-name {
        background-color: rgba(0, 0, 0, .1);
        border-radius: 0;
        cursor: default;
        font-size: 90%;
        font-weight: 900
    }

    jdp-container .jdp-footer {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        justify-content: space-between;
        outline: 0;
        padding: .5rem .5rem 0;
        width: 100%
    }

@media only screen and (max-width:481px) {
    jdp-container .jdp-footer {
        margin: .5rem 0
    }
}

jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
    background: #569ff7;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 90%;
    font-weight: 400;
    padding: .3em .6em;
    text-align: center
}

@media only screen and (max-width:481px) {

    jdp-container .jdp-btn-close,
    jdp-container .jdp-btn-empty,
    jdp-container .jdp-btn-today {
        font-size: 100%;
        padding: .5em .8em
    }
}

jdp-container .jdp-btn-close.disabled-btn,
jdp-container .jdp-btn-empty.disabled-btn,
jdp-container .jdp-btn-today.disabled-btn {
    cursor: not-allowed;
    opacity: .2
}

@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-today ~ .jdp-btn-empty {
        margin-left: auto;
        margin-right: 1em
    }
}

jdp-container .jdp-time-container {
    display: flex;
    padding: 0
}

    jdp-container .jdp-time-container .jdp-time {
        flex: auto;
        margin: 0 .5rem;
        position: relative
    }

        jdp-container .jdp-time-container .jdp-time select {
            background: rgba(0, 0, 0, .03);
            border-radius: 5px;
            padding: .5rem 1rem .5rem 7px
        }

        jdp-container .jdp-time-container .jdp-time:after {
            content: ":";
            font-size: 1.5rem;
            height: 100%;
            position: absolute;
            right: -.7rem;
            top: 50%;
            transform: translateY(-50%)
        }

        jdp-container .jdp-time-container .jdp-time:first-child:after {
            display: none
        }

    jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
        font-size: 1.5rem;
        padding: .8rem 1rem .8rem 7px
    }

    jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
        font-size: 2.3rem;
        position: absolute;
        right: -.8rem
    }

@-webkit-keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes jdpOpenAnimationMobile {
    0% {
        bottom: -10%;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes jdpOpenAnimationMobile {
    0% {
        margin-bottom: -20%;
        opacity: 0
    }

    to {
        margin-bottom: 0;
        opacity: 1
    }
}

© FreeFormatter.com - FREEFORMATTER is a d/b/a of 10174785 Canada Inc. - Copyright Notice - Privacy Statement - Terms of Use - Contact