# Editor-viewable project/page background? **URL:** \ **Category:** How do I?\ **Tags:** design\ **Created:** [February 2, 2024, 11:14pm UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781 "2024-02-02T23:14:09Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![gduteaud](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@gduteaud](https://community.weweb.io/u/gduteaud)\ **Post date:** [February 2, 2024, 11:14pm UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/1 "2024-02-02T23:14:09Z")
Hi all! I would like to display a background gradient across my app. Eventually I may or may not want different gradients on different pages or depending on a light/dark mode setting but for now let’s keep things simple and just get a single gradient working everywhere. I understand this can be done in the custom code setting, either at the page of project level, however this does not display in the editor - only when published. Re-publishing the entire project to validate whether or not it actually looks right when changes are made to the design is, of course, not really workable, nor is working “half-blind” in an editor that doesn’t display the app the way it’s actually going to look to the user. This old thread [TUTORIAL – Change section, page, or project background color - #4 by aurelie](https://community.weweb.io/t/tutorial-change-section-page-or-project-background-color/238/4) seems to indicate there exists a solution to display such background colors in the editor, but I don’t really understand the solution or know if something more straightforward has since been implemented. Does anyone have an answer to this? Thanks! ---
**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\ **Post date:** [February 3, 2024, 1:29am UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/2 "2024-02-03T01:29:04Z")
I think the changes are visible in the editor only if you have a paid plan ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [February 3, 2024, 4:30am UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/3 "2024-02-03T04:30:12Z")
I don’t suggest using the gradients in CSS, I’ve been working quite intensely on a gradient heavy frontend, and it’s that gradients are really not compatible within the web in general. Each browser makes them differently and introduces so called “banding”. I think you’re better off with a very optimized png with a gradient. ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [February 3, 2024, 7:58am UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/4 "2024-02-03T07:58:29Z")
gradients do work with web, it’s just that usually you never want to use only 2 colors, and this is a matter of color space. There is plenty of tools to generate better gradients. The global custom code only loads in the published app. As an alternative you need to use a style tag in a html element or a js action on page load, but for a page background you will likely have a flash of unstyled content. ---
**Author:** ![gduteaud](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@gduteaud](https://community.weweb.io/u/gduteaud)\ **Post date:** [February 3, 2024, 5:06pm UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/7 "2024-02-03T17:06:34Z")
@rayanenocode I am on a paid plan, so no. @Broberto Thank you for your input, although it’s not really helpful in answering the core question of how to get a background to display in the WeWeb editor. Whether it’s a color, a gradient, or an image, the same issue remains. @dorilama Thank you, would you happen to have some resources to recommend on the topic of better gradients for the web? I understand global custom code only loads in the published project, that’s really the core issue here. I wonder if the WeWeb team has any plans to change that since it’s a pretty significant limitation. I understand the js action on page load solution, which is suboptimal for both performance and UX imo. Can you expand on the “style tag in a html element” approach you mention? Thanks! ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [February 3, 2024, 5:18pm UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/8 "2024-02-03T17:18:54Z")
> [@gduteaud](#): > > would you happen to have some resources to recommend on the topic of better gradients for the web? google “css gradient generator” and pick one 🙃 there is a great explaination here: [Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.](https://www.joshwcomeau.com/css/make-beautiful-gradients/) > [@gduteaud](#): > > Can you expand on the “style tag in a html element” approach the usual way to add css to a page is with a style tag, the html element allows you to write html that will be injected in the page [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) ---
**Author:** ![gduteaud](https://avatars.discourse-cdn.com/v4/letter/g/f19dbf/32.png) [@gduteaud](https://community.weweb.io/u/gduteaud)\ **Post date:** [February 3, 2024, 6:23pm UTC](https://community.weweb.io/t/editor-viewable-project-page-background/6781/9 "2024-02-03T18:23:55Z")
Thank you haha I did Google it but there’s of course a ton of material out there, so I recommendations from trusted people are always appreciated! > the usual way to add css to a page is with a style tag, the html element allows you to write html that will be injected in the page Are you talking about the WeWeb html element? EDIT: Oh my god, this is great! I can just plop down a WeWeb html element anywhere on the page and put in my custom style tag and it works right in the editor, yay! Not a super clean solution but definitely workable. Now ideally I would just need a way to set this as “editor only” and use the real, project/page-level custom code for prod.