Gradient in syntax theme


Is Atom able to display gradient-effects?

I tried this inside the syntax-variables.less file:

@syntax-gutter-background-color: linear-gradient( yellow, blue );


@syntax-gutter-background-color: -webkit-linear-gradient( yellow, blue );


@syntax-gutter-background-color: .gradient( yellow, blue );

(The last one made the whole theme disappear-> no cursor, everything white, hard to edit)

Can someone help me?

Thanks in andvance



It’s generally better to experiment with things like this in your styles.less file first so you don’t end up breaking your theme completely on a syntax error like in your last example.

To confirm the issue, I tried the following:

.editor .gutter {
  background-color: blue;

which worked. But when I changed it to:

.editor .gutter {
  background-color: linear-gradient(yellow, blue);

Or the -webkit- prefixed variant, it did not work. So it isn’t a matter of specificity or anything like that.


Yeah, the reason this doesn’t work is because linear-gradient and other gradients are actually background images and not colours. So you’ll have to set the gutter manually instead of just using the variable:

.editor .gutter {
  background: linear-gradient(yellow, blue);

You’ll probably want to set a fallback colour for @syntax-gutter-background-color in case any other packages use it.