Web Designer Wall
CSS & HTML

Chroma Wallpapers: Make Glowing Gradient Wallpapers with CSS and SVG

By Aigars Silkalns Updated 8 min read

Chroma Wallpapers: Make Glowing Gradient Wallpapers with CSS and SVG

Abstract gradient wallpapers used to be a Photoshop job: a huge canvas, a pile of blurred layers, the Warp tool, and a computer straining under the memory load. Today you can make the same energetic, glowing look in the browser with a few lines of CSS and SVG, keep it as editable code, and export it at any resolution, including 4K. This guide covers two techniques: a mesh-style gradient built from layered radial gradients, and Chroma-style glowing ribbons, the effect the original tutorial taught, drawn as SVG lines with a blur for the glow.

The original Chroma tutorial built its look from a dark base gradient, bright lines bent with a warp tool, and glow layer styles with Screen blending. We will follow the same recipe, step by step, with modern equivalents of each part.

What you need

  • A text editor and any current browser. No build step and no libraries.
  • Optionally, Playwright or the browser’s own capture tool to export a PNG at wallpaper size.

Technique 1: a mesh-style gradient in pure CSS

CSS has no true mesh gradient, where you drag points on a grid. You can get most of the way there by stacking several radial-gradient() layers, each fading to transparent, over a dark base color. Each layer is one blob of color, so the number of layers is the number of “points” in your mesh.

A wallpaper with soft violet, cyan, orange and pink color blobs blending into each other
Four radial gradients over a dark violet base.
.wallpaper {
  min-height: 100vh;
  background:
    radial-gradient(at 12% 18%, oklch(0.62 0.25 300) 0, transparent 50%),
    radial-gradient(at 85% 12%, oklch(0.80 0.14 210) 0, transparent 45%),
    radial-gradient(at 78% 85%, oklch(0.75 0.18 55)  0, transparent 50%),
    radial-gradient(at 15% 90%, oklch(0.65 0.24 350) 0, transparent 45%),
    oklch(0.2 0.06 290);
}

Why OKLCH

OKLCH describes a color as lightness, chroma and hue. Because lightness is perceptual, you can pick four hues at the same lightness and chroma and know they will feel balanced together, which is exactly the “triad” balance the old tutorial recommended picking by eye. It also lets you reach colors outside sRGB on wide-gamut displays. Browsers that cannot show them map them to the nearest displayable color.

For smoother blends, ask the gradient itself to interpolate in a perceptual space. The in oklch syntax avoids the muddy gray band you sometimes get between two saturated colors in sRGB:

.stripe {
  background: linear-gradient(in oklch 45deg, #1b0b3a, oklch(0.8 0.15 200));
}

If gradient syntax is new to you, our older walkthroughs still explain the basics well: Cross-Browser CSS Gradient shows how angles and color stops work, and CSS3 Gradient Buttons applies them to UI.

Add a little grain

Smooth digital gradients can show banding, bands of color on 8-bit displays. A touch of noise hides it and makes the wallpaper feel printed rather than rendered. An SVG feTurbulence filter generates noise with no image file. Layer it on top with a pseudo-element at low opacity:

.wallpaper { position: relative; isolation: isolate; }
.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Technique 2: Chroma-style glowing ribbons with SVG

The Chroma look is many thin parallel lines that bend, twist and cross, lit up with a glow against a dark background. In Photoshop you faked this by drawing lines and warping them. In code it is simpler and more controllable: write a function that draws a family of lines following the same wave, then change the spacing between them along the way. Where the spacing shrinks the lines bunch into a bright twist; where it grows the ribbon opens up.

Two glowing ribbons made of fine lines, one cyan to pink, one yellow to orange, weaving across a dark violet background
Two ribbons of 70 and 55 lines, each drawn twice: once blurred for the glow, once sharp.

Step 1: the dark base

Start with a dark linear gradient at 45 degrees, black into deep violet, just like the original. The base needs to be dark so the lines can glow. Pick line colors from other points on the hue wheel: cyan, magenta and orange against violet echo the old violet-cyan-orange triad.

Step 2: define the line colors and the glow

Each ribbon gets its own horizontal gradient. Use gradientUnits="userSpaceOnUse". Without it, SVG sizes the gradient to each shape’s bounding box, which is fine for ordinary shapes but fails for perfectly flat lines whose box has zero height. The glow is an feGaussianBlur filter, the SVG counterpart of Photoshop’s Outer Glow.

<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
     role="img" aria-label="Glowing abstract ribbons">
  <defs>
    <linearGradient id="bg" gradientTransform="rotate(45)">
      <stop offset="0" stop-color="#05030d"/>
      <stop offset="1" stop-color="#2a0f5c"/>
    </linearGradient>
    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" x2="1600">
      <stop offset="0"   stop-color="#22d3ee"/>
      <stop offset=".55" stop-color="#e879f9"/>
      <stop offset="1"   stop-color="#fb923c"/>
    </linearGradient>
    <filter id="glow" filterUnits="userSpaceOnUse"
            x="-100" y="-100" width="1800" height="1100">
      <feGaussianBlur stdDeviation="7"/>
    </filter>
  </defs>
  <rect width="1600" height="900" fill="url(#bg)"/>
  <g id="glowA" filter="url(#glow)" fill="none" stroke="url(#a)" stroke-width="3"/>
  <g id="lineA" fill="none" stroke="url(#a)" stroke-width="1.1"/>
</svg>

The blend mode goes in your stylesheet, because mix-blend-mode is a CSS property rather than an SVG attribute:

#lineA { mix-blend-mode: screen; }

Step 3: generate the lines

This function replaces the “draw lines, group, duplicate, rasterize, repeat” routine from the old tutorial. It is one-dimensional math: every line shares a center curve, and each is offset from it by a fraction of a spread value that pulses along the x axis.

function ribbon(id, { n, cy, amp, freq, phase, spread, twist }) {
  const group = document.getElementById(id);
  if (!group) return;
  let d = '';
  for (let i = 0; i < n; i++) {
    const t = i / (n - 1) - 0.5;          // -0.5 .. 0.5 across the ribbon
    let p = '';
    for (let x = -50; x <= 1650; x += 20) {
      const u = (x / 1600) * Math.PI * 2;
      const centre = cy
        + amp * Math.sin(u * freq + phase)
        + amp * 0.45 * Math.sin(u * freq * 2.3 + phase * 1.7);
      const width = spread * (0.25 + 0.75 * Math.abs(Math.sin(u * twist + phase)));
      p += (p ? 'L' : 'M') + x + ' ' + (centre + t * width).toFixed(1);
    }
    d += `<path d="${p}"/>`;
  }
  group.innerHTML = d;
}

const A = { n: 70, cy: 430, amp: 130, freq: 1, phase: 0.6, spread: 260, twist: 1.4 };
ribbon('glowA', A);   // blurred copy underneath
ribbon('lineA', A);   // crisp copy on top

Drawing each ribbon twice, once through the blur filter and once sharp, is what makes the lines look lit from inside. The sharp copy uses mix-blend-mode: screen, the same blend mode the original tutorial relied on: Screen only ever lightens, so overlapping ribbons add up to bright white-ish crossings instead of covering each other.

To tune the result, change one parameter at a time. twist controls how often the lines pinch together, spread the maximum width, and phase slides the wave sideways so a second ribbon crosses the first. Add a third ribbon in a different hue pair if the composition feels empty, but leave negative space; the original author’s advice to be messy works better with a dark field behind it.

Want to go further with blend modes? How to Create Spotify Colorizer Effects With CSS Blend Modes goes deeper, and Playing with SVG Design covers the basics of drawing in SVG.

Animate it, respectfully

A wallpaper can drift slowly. The cleanest way for the CSS mesh is to register the gradient positions as typed custom properties with @property, which lets the browser interpolate them, something a plain custom property cannot do:

@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 12%;
}

.wallpaper {
  background:
    radial-gradient(at var(--x) 18%, oklch(0.62 0.25 300) 0, transparent 50%),
    oklch(0.2 0.06 290);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift { to { --x: 70%; } }

@media (prefers-reduced-motion: reduce) {
  .wallpaper { animation: none; }
}

Always include the prefers-reduced-motion block. A full-screen moving background can cause discomfort for some people, and a static version is just as pretty. Animating several large blurred gradients also costs GPU time, so test on a modest phone before shipping it as a site background. For more on animated color, see Animating Background Colors.

Export a wallpaper at any size

Because the artwork is code, resolution is just a viewport setting. With Playwright you can render the page at 1920 x 1080 and a device scale factor of 2 to get a 3840 x 2160 image:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1920, height: 1080 },
  deviceScaleFactor: 2,
});
await page.goto('file:///path/to/wallpaper.html');
await page.screenshot({ path: 'wallpaper-4k.png' });
await browser.close();

If you would rather not write a script, the “Capture node screenshot” command in Chromium DevTools exports a single element at its rendered size. For the SVG ribbons, you can also save the markup as a standalone .svg file and open it in a vector editor, since it is plain paths. Export wallpapers as PNG for the sharpest lines, or convert to AVIF or WebP when using them on a website, where file size matters more than lossless detail.

Photoshop and design tools: when they still win

The layer-style recipe from the original (Gradient Overlay, Outer Glow, Screen blend) still works in Photoshop, and the Warp transform is still found under Edit > Transform > Warp. If you want hand-painted organic shapes, or to combine the gradient with photographs, a raster editor is the right tool. Reach for CSS and SVG when you want crisp results at any size, a file that weighs a few kilobytes, easy color changes through custom properties, or a background that adapts to light and dark themes with a media query.

Practical tips for good gradient wallpapers

  • Keep the base dark and the accents bright. Glow needs contrast; the same ribbons on a pale base turn flat.
  • Limit the palette to three or four hues. More than that and the blend turns brown where complementary colors meet.
  • Check text contrast. If the wallpaper sits behind content, put a semi-transparent overlay or solid panel behind text and test it against WCAG contrast ratios.
  • Set a fallback color. A plain background-color declared before the gradient covers the rare case where a layer fails to render.
  • Use isolation: isolate on the wrapper so blend modes only affect the artwork, not the rest of the page.

Browser support

Everything used here is part of the modern web platform. Radial gradients, SVG filters and mix-blend-mode are long-established and work across current browsers. The OKLCH color function, in oklch gradient interpolation and @property are all Baseline: they work in the latest versions of Chrome, Edge, Firefox and Safari. Check the Baseline badges on the MDN pages for oklch() and @property before relying on them for older audiences, and keep a simple fallback color for browsers that miss a feature.

80 comments from the archive

  1. Wow! I love how using a few different and simple techniques together can create such a stunning effect. Great work, keep them coming!

  2. What version of Photoshop introduced this feature?
    “Warp Transform Tool ( Photoshop > Edit > Transform > Warp ):”
    Plenty of cool things are missing from version 7.0 dating back to 2002 already wow :(

  3. I think its an amazing trip Nick, it looks great! But, ok, just my opinion, I think that all those blue lights mixed with the yellow waves look kinda strange… Maybe using less blue effects, or maybe using another color would make it look good.

  4. I think the blue and yellow look great together. They add to the movement and excitement of the image. Thanks for the tutorial…actually, tutorialS…they’re all awesome.

  5. Ha! I was experimenting with this not so long ago and nearly pulled my hair out when my goal wasn’t accomplished. Thanks for the tut! I’ll be exploring the new possibilities tonight!

  6. Cool Tutorial, I liked the way you ve authored this tut…keep up the good work !

  7. What an awesome tutorial! I know it’s sometimes tough to give up your favorite trick, so I wanted to personally say thank you.

    I wound up coupling it with an overlay of the cloud rendering directly above the background, and it gives it even more of an ethereal look.

    Again, thanks! :)

  9. A little offtopic – do you plan to publish results of TxEff contenst? I check the blog everyday to see did you post the results and every day there’s nothing.

  10. I always admired the wallpapers at Color Charge. It was therefore very interesting to read your tuturial to see how the magic is done!

  11. Great tutorial you have! I am so going to use it to make something! Its really great! Good work!

  12. Great tutorial really enjoyed it and you can take further with making it a background image and adding some vector art graphics.
    Thanks

  13. Hey guys,
    Sorry but I am trying to reproduce this tutorial on CS3 – I am new in Photoshop and can’t get pass the stage to rasterize. The option is grey out in PS and if i try to wrap – nothing happens.
    Any ideas?

    Thanks

  15. I thought I knew all about Photoshop, now I realised I do NOT! :D
    Thanks for this great tutorial, I’ll never close the “unuseful” brush panel.

  20. Great tut. Never thought of warping a set of straight lines (guess that’s why I’m still ‘learning’ the ins and outs of photoshop).

    Love learning something new.

    Cheers

  22. hai htis is prasanth from india i am working in hometextile designing .im using photoshop cs2 i dont know how to giving the weaving effect in stripes check designes in this softwear if u know about this plz send me the metod of weaving effect to my address

  23. Mine didn’t quite turn out the way that your’s did. I didn’t get those nice rings around the dots like you did. :(

  25. You lost me on the first step with the add lines part. Using the line tool first creates a path, so then I added in the lines but did not get the result as shown. Why also would you say to put on an overlay layer style without putting anything down on the layer itself, after doing this step by your description, your still left with a blank layer.

  26. @William: With the line tool selected you can click what way you want your line displayed in the top left. There’s fill pixels (which just adds pixels to an existing layer, like a brush), paths (what you have), and shape layers. We want to use shape layers so that the lines will stay independent and editable. Eventually you’ll want to rasterize them so they’re not shapes anymore, but at at least they’ll still be their own layers.

  28. maybe i should have mentioned… i can do the dots just fine, but no warp tool
    =*(

  29. I cannot seem to get past the part where you start making the lines, group them, and rasterize them. For some reason the warp tool is not available. Can someone please tell me what steps I’m missing? I would really appreciate it. Thanks.

  30. excellent tutorial. however i agree with the previous comment. which is a great alternative to the warp tool?

  31. I love this article!
    Really nice for me, It will polish little more all of my design work.

  32. can you be more specific on the things you have done?
    there are some steps i can do because i don´t no how can i do it

  34. I couldn’t do exactly what it showed without photoshop, but I got some good ideas. Thanks. :3

  35. Simple KOOL effect..
    Very easy to make and fruitful outcome..
    send me more of these..
    regards,
    Mohammed

  36. ever tried the gradient-tool? you can use “noise” insted of “solid”… makes the same result in just some seconds…

  37. Cool effect…help to create more funky vector shapes for my art work.

  40. What I did to get the lines without spending all that time with the line tool was first set my brush to a 1px circle with 100% hardness and 854% spacing, then use the pen tool to draw a vertical line th the left, point-to-point from top to bottom that is completly straight, then right-cliked and set the stroke path to the brush (simulate presure UNchecked) so I had a vertical line of dots, then I used the “Move Tool” (with “Show Transform Controls” checked off) to stretch it sideways so my dots grew into horizontal lines. I repeated this a couple times with different colors/sized/spaces to get the same effect it much less time.

  41. I just loved the tutorial!!! I’m new in practicing seriously whit photoshop and i can’t describe my happiness when I found this site, your works and ”lsessons”. Thanks a lot.
    Marco, (Italy).

  42. i’m working in CS3 web premium on a pc. i don’t seem to have the ability to control the spacing on the scatter effect. i also don’t see where you can use “fade” with “scatter”. anybody have any tips (besides use a mac =D )

  43. Hi! Nice Coding and designing out there ha? I hope You can demonstrate a lot of examples and Tutorials for the days to come

    best regards:
    Renzy12

  44. oh boy!!
    your website is…simply AMAZING!!!
    i LOVE! it!!!
    so fresh,light,energizing..reminds of..happiness :)
    great job!! keep it on :)

    + > thnx for such an amazing tutorial & sharing!!

    all best!!

  46. the download psd file is corrupt… can u change the link so that i can download it.. i really want to learn this technique huhu,,,
    plz

  47. awesome… though I tried a couple of times to make it successful,, anyway nice work! love it!

    FYI: “mbuhlah” is a traditional language in Indonesia which means “whatever or I dont care, or I dont know” is it right sang kresna?

    =D

  49. I’m SOURPRISED!!! Wow, FINALLY I found this tutorial of HOW TO DO THIS!!!!! Thanks so much! I’ll try it when I have no more jobs in this week. Thanks a lot again!!!

  52. hmm..im sorry…but its so hard to explain…ur tutorial is so hard to understand..unlike other tutorial…T.T

  53. The tutorial is good. But I think the only difficult thing in this is making the lines. Because when I would try and duplicate the layers, it would not show. There must be a certain brush that one can use to make the lines?

  54. no matter what I try it doesn’t come out at all the way you do it, you just don’t know how to explain the step-by-step process, you need to redo this, which I doubt you will

  55. Nice attempt to help us. Many of the most important settings and steps were skipped. For the uninitiated like me this tutorial is not thoroughly informative. Just a hint of what can be done withe the warp tool.

  56. Just a little tip to avoid all the hassle of drawing the lines one by one:
    Create a new document the height of your original document and one pixel wide. Then add monochromatic noise. Then go select>color range and select the shadows and then delete them. Repeat with the midtones. Now press ctrl-a and the go edit>define brush preset and name it whatever you want. After that, go into you original document and on a new layer select the fill tool. Then switch the fill from foreground to pattern and choose the pattern you just created. Then use it just like you would normally. This way reduces a lot of clicks.

  57. I don’t care what they say, this tutorial is great. You do leave some gaps, but I believe not everything needs to be explained… sometimes you just have to play around! Great Job! ;)

  58. I have found a cool new way to do this great tutorial! Skip drawing all those lines: Go to the gradient tool, and select Noise in gradient type. Put Roughness up to around 100%, and select add transparency. Seems complicated, but it is super easy. The best part is, you can do multi-color warps!

  59. hmm can someone help help me when i do this and save it it only lets me save it in psd or some weird big formats ive never come across and windows dosnt rearly reconise them and i cant use it for a background please help it will be much apcriated

  60. hmm.eddie.u can change the format of your psd file.
    go to file>save as..> then u chnge the format follow the format that you want.
    to make it as ur desktop bckground, mybe you need to increase the picture size.=D

  61. Jeez guys, how do you set up the brushes? Could somebody please describe it more into detail?

  62. The designs showed here show what simple and tasteful design is all about. Another one to consider

  63. the Warp Transform Tool ( Photoshop > Edit > Transform > Warp ): isnt working any ideas?

  66. Thank for your great tutorials. One problem is that i could not understand is that what is mean by Group them, duplicate, rasterize etc. Kindly request to answer me.
    With best regard
    Niraj Thapa

  67. No wonder, with white iphone 4 in your hand will make you be the focus of the crowd! You won’t miss it!

  68. I just can’s believe how surprise when i receive my iphone 4. Its so charming and functional! But there’s one thing i don’t satisfy, i don’t like the color. Waiting for the coming white iphone 4 conversion kit.

  70. Thank for your great tutorials. One problem is that i could not understand is that what is mean by Group them, duplicate, rasterize etc. Kindly request to answer me.

  71. All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..

  72. Thank for your great tutorials. One problem is that i could not understand is that what is mean by Group them, duplicate, rasterize etc. Kindly request to answer me.
    same problem i having facing ? pls tell me how to done it…..

  73. Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

  74. i cant follow ur instructions because my photoshop is 5 please make ‘nother one :D

  75. Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
    (55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

  76. Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
    (55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

  77. This is the greatest driver site on the web. Not only did I find the drivers I needed to update my product, but also get other helpful information to optimize my computer. My computer never ran so well like now. Thank…

  78. Thank you for the tutorial, very nice. Would you be so kind as to teach a newbie how to get through the step where you say “Group them, duplicate, rasterize, group, duplicate, rasterize”? Thanks a lot.

  79. is there any video?? Because i cant follow the instructions..

  80. Hi…it is very nice…
    very useful to Photoshop learners…
    Thanks for sharing….

Comments are closed on this article.