Add a Radial Gradient Behind Logo Only

In the “Additional CSS” section of the dashboard add this:

body:not(.home) .custom-logo-link {
    display: block;
    position: relative;
}

body:not(.home) .custom-logo-link:before {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+78&0.65+0,0+78 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 78%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 78%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    bottom: 0;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    text-decoration: none;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    width: 100%;
    z-index: -1;
}

body:not(.home) .custom-logo-link:before:focus,
body:not(.home) .custom-logo-link:before:hover {
    opacity: 1;
}

https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

• This reply was modified 6 years, 7 months ago by Andrew Nevins.
• This reply was modified 6 years, 7 months ago by Andrew Nevins.

This is great. Is it my imagination, or does it load faster in the “Additional CSS” than when I use it in my child theme?

Is it better used in one over the other?

• This reply was modified 6 years, 7 months ago by stephenvann.

Oh sorry didn’t realise you were using both. The Additional CSS may be faster because it does not require an additional HTTP request, however not all of that time is free as there is more server-processing time.

Thank you Andrew!