e4 CSS Styling: Fun with Gradients


Today I read in the e4-dev mailing list that css styling now supports gradients (Thanks Kevin, Angelo and others!). I could not resist to try it out in my e4 contacts demo. Here is the result:


The css gradient definitions are quite simple:
For the composite: background-color: #101010 #373737 60%;
For the toolbar: background-color: #777777 #373737 #202020 50% 50%;

One little trick to get the labels having transparent background is to invoke setBackgroundMode(SWT.INHERIT_DEFAULT) on the current shell.

Instructions how to get and run the demo you find here.

Have Fun


Follow me on Twitter


  1. Kevin McGuireMay 28, 2009

    This looks great!

    Now we just need SWT to give us control over the menu bar and table header 🙂

  2. Chris AniszczykMay 29, 2009

    Cool stuff Kai! It’s great to have an example already with e4!

  3. Suraj ChandranJuly 21, 2009

    The latest e4 contacts demo does not work.
    I downloaded it this morning and it gives me this exception:
    at org.eclipse.e4.ui.workbench.swt.internal.WorkbenchWindowHandler.setBounds(WorkbenchWindowHandler.java:31)
    at org.eclipse.e4.workbench.ui.internal.Workbench.createGUI(Workbench.java:528)

  4. Kai TödterJuly 21, 2009

    Suraj, the current trunk (07/21/09) works, just delete your launch configuration and create a new one using the .product file.

  5. Suraj ChandranOctober 21, 2009

    Coming back a little late ….. It does work now 🙂

Leave a Reply

I accept the Privacy Policy