I need to add CSS file for Admin side in my custom module. How can I add this for Admin (back-end) only ?

  • regarding Krishna ijjada's answer: I also needed to add registration.php And im not sure if module.xml is required also. Commented Sep 3, 2020 at 14:59

4 Answers 4


1 Create a module for example Vendor/Module, this _means a fully working module, including registration.php file etc.

2 Create a new file view/adminhtml/layout/default.xml in the module:

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <css src="Vendor_Module::css/test.css"/>
  1. Add .css file in web folder as below path:


Run below commands and check.

php bin/magento cache:clean
php bin/magento setup:static-content:deploy

Optional - check css load order:

Note: css file load order might mean that your styles do not take effect, as styles.css gets loaded after these files.

This only works ~Magento 2.3 (tested on Magento 2.3.5).

For example: adding order to 999, ensuring that it _should be one of the last media=all items:

<css src="Vendor_Module::css/test.css order="999" />

For additional information (for instance for older versions) on ordering: See this question

  • 1
    Hello, I am trying to add <css src="Magento_Catalog::catalog/category-selector.css"/> in my custom module, but it is showing 404 error in console. Commented Jul 12, 2017 at 12:34
  • in this example, Vendor_Module is the applied theme name only or we can take out new module also ? @Krishna ijjada Commented Nov 5, 2018 at 6:17
  • I just need to add one css file and somehow the css is not being added when I see in browser. I need no css except the required one so I am removing the css/styles.css, and doing <referenceContainer name="header" remove="true" /> <referenceContainer name="menu" remove="true" /> <referenceContainer name="logo" remove="true" /> <referenceContainer name="header.container" remove="true" /> <referenceContainer name="footer" remove="true" /> . Any idea what am I missing...?
    – MSQ
    Commented Jan 21, 2021 at 12:53

Magento 2 uses less file so you can also use less type as follows below step.

Create new file at Vendor/Module/view/adminhtml/web/css/source/_module.less

after that run below command from root directory and check

rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy
  • I need to add .less file to use less variables like @icon-help__content; I want this less file to be loaded after the other files are loaded what is the proper way to do this.
    – AbdulBasit
    Commented Oct 24, 2017 at 11:30
  • 3
    This has to be considered the correct answer. Commented Nov 20, 2021 at 13:44
  • am I the only for who neither this and the marked answer post doesn't work ? :) Commented Sep 29, 2022 at 7:36

The accepted answer can still be improved. With default.xml you will add the file to * every * admin page. This may not be the desired behavior.

Use appropriate controller handle:


System configuration handle:



Step 1: Create a module for example Vendor/Module

Step 2: Create a new file view/adminhtml/layout/default.xml in the module

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 


    <css src="Vendor_Module::css/test.css"/>

    <script src="Vendor_Module::js/test.js"/>



Step 3: Add .css file and add js file in web folder as below path



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.