The new radial gradient syntax

Warning This article was written over six months ago, and may contain outdated information.

Back in Jan­u­ary I wrote a post explain­ing the new lin­ear gra­di­ent syn­tax, and promised to return to explain the equiv­a­lent for radi­al gra­di­ents when it had been imple­ment­ed some­where. That time is now, as the lat­est pre­view release of IE10 brings full sup­port for the new syn­tax — and unpre­fixed, to boot.

The sim­plest radi­al gra­di­ent cre­ates a two-colour ellip­ti­cal gra­di­ent which radi­ates from the cen­tre of the box; you can see it in Radi­al Exam­ple 1, and the code to gen­er­ate it looks like this:

div { background: radial-gradient(#00F,#FFF); }

If you’d pre­fer a cir­cu­lar gra­di­ent, as shown in Radi­al Exam­ple 2, rather than an ellip­ti­cal one, just add the circle keyword:

div { background: radial-gradient(circle,#00F,#FFF); }

By default the gra­di­ent will radi­ate out from the cen­ter of the box to the cor­ner far­thest away from it, but you can change that by using a size val­ue; in Radi­al Exam­ple 3 the closest-side key­word is used:

div { background: radial-gradient(closest-side circle,#00F,#FFF); }

Oth­er accept­able key­words are farthest-corner (the default), farthest-side, and closest-corner. You can also use unit values:

div { background: radial-gradient(25px circle,#00F,#FFF); }

You can change the posi­tion of the cen­tre of the gra­di­ent by using the at key­word fol­lowed by a one or two val­ue posi­tion, as in Radi­al Exam­ple 4:

div { background: radial-gradient(farthest-side circle at right,#00F,#FFF); }

If you use only one val­ue, like I just did in my code exam­ple, the oth­er is pre­sumed to be center; so the fol­low­ing val­ues would also set the cen­tre of the gra­di­ent at the same point (pre­sum­ing a box 100px square):

div {
  background: radial-gradient(at right center,#00F,#FFF);
  background: radial-gradient(at 100% 50%,#00F,#FFF);
  background: radial-gradient(at 100%,#00F,#FFF);
  background: radial-gradient(at 100px,#00F,#FFF);
}

Real­ly this new syn­tax is most­ly just a rearranged order from the exist­ing radial-gradient, so there isn’t much new to learn; col­or-stops and repeat­ing radi­al gra­di­ents work in the same way as before.

1 comment on
“The new radial gradient syntax”

  1. […] a fuller explan­a­tion of the new radi­al-gra­di­ent syn­tax at […]