When we customise the page in WordPress, it shows Additional CSS option in left panel, Customizer settings are saved by hitting the ‘Save & Publish’ button. This also saves our custom CSS added in the Additional CSS section, This custom added CSS is placed in the HTML head section on the frontend so that the changes can be applied to the frontend. (Can be checked by viewing the source code from the frontend.)

My task is,

To save this CSS in a file in the upload folder dynamically Render the custom CSS from the file. (that was just generated dynamically in 1st step above.) Remove it from the HTML head section. Otherwise, the custom CSS will be rendered twice. please can anyone suggest some code to perform this? Thanks