XEO CSS: HTML Editor, Visual Editor & Auto Code Generator For CSS


There are multiple CSS code generators that allow you to add effects either to images, text or elements. These code generators are what they are and give you the CSS code only. Few of them allow you to chose how you would like to load the CSS in your HTML file. What they leave up to you is creating the HTML file and defining classes in it manually. XEO CSS is a CSS code generator and an HTML editor. It creates an HTML file and gives the option to either load classes from HTML, IDs from HTML to elment names from it. Changes to CSS are made via a visual editor and there is little or no coding involved. You can save multiple files by signing up to the service and resume editing them anytime.

You don’t necessarily have to sign up for an account, you will be able to use all features of the app without signing up but you will not be able to save files. When you first use the application, it shows you a mockup HTML page preview. Everything from the font, background color to the drop shadow can be edited.


You can start off by either editing the HTML file or the CSS file. Both are edited and saved separately; when you make CSS changes, make sure you click the save button. CSS file is saved when you’re in Preview mode. Click the save button in HTML Editor mode to save any changes to the HTML file.

With the HTML template that loads by default, there is also a CSS file and all classes in the file are listed in a panel on the left. You can add or remove any one of these classes. To add a class, click the plus sign and start typing in the class name, to delete a class, select it and click the minus sign.

XeoCSS selectors

The top navigation bar allows you to switch between the HTML editor, CSS Code, CSS Editor and the preview mode.

XeoCSS tools

To edit CSS for a particular selector, select it from the left panel and click CSS Editor from the top navigation bar. A visual editor will open allowing you to edit the background, typography (text), dimensions, layouts, transformations, borders and transitions. The editor allows you to edit CSS defined attributes that you would normally have to code.

XeoCSS visual editor

If you choose to add a new selector, you can use this same editor to define its attributes and apply the class wherever you want to by editing the HTML file. Click Save after both HTML or CSS changes. The save function has a few glitches in it and while your CSS file is always saved, the HTML file might not be so make sure you always copy the the code from the respective HTML and CSS code views.