Web Designer Wall
CSS & HTML

Deep and Moody: Dark, Atmospheric Web Design with CSS

By Aigars Silkalns Updated 7 min read

Deep and Moody: Dark, Atmospheric Web Design with CSS

A deep, moody look is a lighting problem, not a layer-count problem: a dark base, one or two coloured light sources, edges that fall into shadow, and a little grain so the darkness feels like a surface instead of a flat fill. In 2027 you build all of that in CSS, and you can make it respond to the visitor’s light or dark preference with color-scheme and light-dark().

The original tutorial on this page was a 15-step Photoshop, Illustrator and Painter composite. Its real lesson still holds: contrast, depth through overlapping translucent layers, and restraint in colour. Below is the same idea as a small, tested CSS recipe you can drop into any site.

A dark rounded poster card with a magenta glow at the top right, a blue glow at the bottom left, a vignette and a bold white headline reading Deep and moody, without the 15 layers
The finished poster card: colour wash, vignette, grain and a tinted glow, all CSS.

What makes a design feel moody

Look at any dark editorial layout you admire and you will find the same four ingredients:

  • A tinted dark, not black. A dark with a hint of blue or violet looks richer than #000, and it avoids the harsh jump between pure white text and a pure black screen.
  • Light with a direction. One or two soft glows suggest where the light comes from. This replaces the old “gradient layer plus hue adjustment” step.
  • Falloff. A vignette darkens the edges so the eye settles on the content.
  • Texture. A faint grain hides gradient banding and adds the tactile feel the Photoshop version got from scans and hand drawings.

Step 1: Set up colour tokens that follow the visitor’s theme

Start by telling the browser your page supports both schemes. color-scheme: light dark on the root also switches built-in form controls and scrollbars to match. Then define tokens with light-dark(), which returns its first value in a light scheme and its second in a dark one.

:root {
  color-scheme: light dark;
  --bg:     light-dark(oklch(96% 0.01 280), oklch(17% 0.03 285));
  --text:   light-dark(oklch(22% 0.03 285), oklch(92% 0.01 285));
  --accent: light-dark(oklch(52% 0.20 340), oklch(72% 0.17 340));
  --glow:   light-dark(oklch(80% 0.10 340 / .35), oklch(55% 0.22 310 / .45));
}

Two things matter here. First, light-dark() only works when color-scheme includes both schemes. Second, I wrote the colours in OKLCH, where the first number is perceived lightness. That makes “same hue, lighter or darker” a one-number change, which is exactly what theming needs. The dark accent is lighter and a little less saturated so it glows without vibrating against the background.

Browser support: light-dark() for colours is Baseline 2024, oklch() is Baseline 2023 and prefers-color-scheme has been supported everywhere for years. The function also accepts images in its specification, but treat image support as newer and check MDN’s compatibility table before relying on it. For gradients, put the colour tokens inside the gradient as shown below instead.

Step 2: Build the page backdrop from two soft lights

Layered radial gradients are the modern replacement for a hand-painted background. Put the lights first and the flat colour last, because the first background layer paints on top.

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(60rem 40rem at 80% -10%, var(--glow), transparent 60%),
    radial-gradient(50rem 40rem at 0% 110%, oklch(40% 0.14 250 / .35), transparent 60%),
    var(--bg);
}

In dark mode this gives a violet haze in one corner and a cold blue in the other. In light mode the same code produces a pale, airy version, so your dark theme and light theme stay one design. If you want a deeper look at moving these gradients, our guide to animating background colors covers the techniques, and cross-browser CSS gradients shows how much simpler gradient syntax has become.

Step 3: Make the hero a fixed-dark “poster”

Sometimes a section should stay dark whatever the visitor prefers: a hero, a cinema-style feature, a footer. Override the scheme on that element only. Because the tokens use light-dark(), everything inside resolves to its dark value automatically.

.poster {
  position: relative;
  isolation: isolate;        /* keeps blend modes inside this card */
  overflow: hidden;
  width: min(100%, 44rem);
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: 1.5rem;
  background: oklch(20% 0.04 285);
  color-scheme: dark;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / .08) inset,           /* thin top highlight */
    0 30px 60px -20px oklch(10% 0.05 285 / .7);    /* deep, soft shadow */
}

I learned this the hard way while building the demo. My first version used a theme-aware surface colour for the card, and in light mode the colour wash blended into a washed-out grey and the headline became unreadable. A fixed dark surface fixes it, and isolation: isolate stops the blend modes below from reaching outside the card.

Step 4: Add the colour wash, vignette and grain

Pseudo-elements give you two extra layers without touching your markup. The first is the coloured light, blended with screen so it brightens the dark base instead of painting over it. The second combines a vignette with an SVG noise texture, blended with multiply so it only darkens.

.poster::before {            /* colour wash */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 75% 20%, oklch(60% 0.24 340 / .75), transparent 45%),
    radial-gradient(circle at 20% 90%, oklch(45% 0.20 270 / .70), transparent 50%);
  mix-blend-mode: screen;
}

.poster::after {             /* vignette + grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, oklch(8% 0.03 285 / .65)),
    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='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .9;
}

This is the CSS version of the original’s “multiply it down” instruction, which appeared in half the old steps. mix-blend-mode is widely supported and does the same job live, with no flattened image to re-export when the copy changes. If blend modes are new to you, our CSS blend mode tutorial goes deeper on how screen, multiply and overlay behave.

The grain is an inline SVG feTurbulence filter, so it costs a few hundred bytes instead of a PNG request and tiles seamlessly thanks to stitchTiles.

Step 5: Type that stays readable in the dark

Moody layouts fail most often on legibility. Keep these habits:

  • Use off-white, around 92% to 97% lightness, for headings and a slightly dimmer tone for body copy. Pure white on near-black glares and can look like it is vibrating.
  • Check contrast for body text against the brightest part of the background behind it, not the average. WCAG asks for at least 4.5:1 for normal text.
  • Use a coloured text-shadow for a glow on large headings only. On small text it just blurs the letterforms.
  • Add text-wrap: balance to headings so short lines do not leave a single orphan word.
h1 {
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
  color: oklch(97% 0.01 285);
  text-shadow: 0 2px 30px oklch(60% 0.24 340 / .5);
}

.btn {
  padding: .75rem 1.5rem;
  border-radius: 999px;
  color: oklch(15% 0.03 285);
  background: var(--accent);
  box-shadow: 0 8px 30px -8px var(--accent);   /* glow in the button's own colour */
}
.btn:focus-visible {
  outline: 3px solid oklch(97% 0.01 285);
  outline-offset: 3px;
}

A shadow tinted with the element’s own colour looks like emitted light, which is what makes a dark interface feel deep rather than flat. Keep the :focus-visible outline very bright: on a dark page, keyboard users need a focus ring that stands out more, not less.

The same card in light mode

Because the page tokens use light-dark(), nothing else changes when a visitor prefers a light theme. The backdrop turns pale while the poster stays a dark feature, which can be a striking contrast of its own.

The same poster card on a pale lilac page background, still dark with a magenta and blue glow
Light scheme: the page backdrop lightens, the poster keeps its night-time mood.

What to do when the mood lives in a photograph

The original piece started from a high-contrast black-and-white photo and added colour. You can still do that in CSS: put the photo in an img, then layer the colour wash from step 4 above it with mix-blend-mode: color or soft-light. For the heavy lifting on the image itself, such as masking a subject or compositing, use a current editor like Photoshop or Figma and export an AVIF or WebP. Keep text out of the image so it stays selectable, translatable and sharp at every size.

For full-bleed imagery behind a dark overlay, see how to build a CSS large background, and browse 80 large background websites for layouts that use darkness well.

Accessibility and performance checklist

  • Respect the user’s theme with color-scheme: light dark and offer a manual toggle only if you also persist the choice.
  • Do not animate the glows aggressively. If you animate them at all, wrap the animation in @media (prefers-reduced-motion: no-preference).
  • Blend modes and large blurred shadows cost paint time. Test on a mid-range phone and keep full-viewport effects to one or two layers.
  • Check contrast with the grain and glow in place, not on the flat colour in your design file.
  • For dark UI patterns you can copy, see the dark footer snippet and the animated gradient chart. For gradient headings, see CSS gradient text effect.

Quick reference

Old Photoshop move CSS equivalent
Gradient layer with a hue shift radial-gradient() with OKLCH colours
Multiply a texture layer down mix-blend-mode: multiply on a pseudo-element
Brighten with a colour layer mix-blend-mode: screen
Burn the edges Vignette with radial-gradient(transparent, dark)
Scanned grain and hand textures Inline SVG feTurbulence noise
Drop shadow to lift the subject Layered box-shadow and tinted text-shadow

Start with the tokens and one glow. Add the vignette, then the grain, and stop as soon as it feels right. The original’s advice to experiment still stands, only now every experiment is a number you can change in the browser and see instantly.

56 comments from the archive

  1. the colours aren’t quit to my tastes, I’d have a few colour layers in there to get a more uniform colour scheme but that’s just me!

    Interesting censoring going on there too! lol

  2. I think it’s pretty cool…

    Why would anyone call it sexist?

    I do wonder about the decision to censor her breasts. If this is art and not pornography then we are looking at the body as a thing of beauty. Why would you need to censor one part of it?

  3. If I’m being honest, step 11 just doesn’t fit in but I like everything else. I would say the censoring is a bit odd. As some people have said looking at this as art wouldn’t require the censoring. Also the censoring didn’t really hide it all that well.

  4. great one! really inspiring work. i have thought a long time about these kind of digital art. and now i am gonna try it..

    thanks

  5. Any particular reason for the painter step? AFAIK, you could accomplish the same thing in Photoshop, or does Painter have a better texture fill algo?

  6. Nice, but not work safe, even though you (barely) pixelated her boobies. It could still get me fired.

  7. Heres the thing people: Nick featured Neil Duerdan as one of his choices for his talented people column on this website. From the look of his portfolio online Mr. Duerdan has worked for clients that we all dream of working with as graphic designers, Coca Cola, Nike etc. Mr. Duerdan is also hired SPECIFICALLY for his style of illustration. He opened up his illustrators tool box and basically told us the secrets to his style which not many people do. Instead of critiquing the steps he provides and the choices of colors and the subject matter of the photo, you should all be grateful that he shared this with all of us, and that you got knowledge from an extremely accomplished artist for free.

    Thanks Mr. Duerdan for sharing this tutorial with us, I have always wanted to know how to achieve a similar style, and your tutorial provided some great tips and tricks that I did’nt know about before!

  9. Amazing. Thanks for the excellent tutorial. Trying to create a piece for class and just not finding the inspiration! ARGH.

  10. Thanks alot, nice tutorial.. this can be an inspiration for my graphic design project, two thumbs for you Neil ;)

  12. How do you switch between photoshop and illustrator? Do just open the same file in the other app, save it, and open it somewhere else again? (When I did this I always got some kind of import box)
    Awesome work bytheway…

  13. Allahtan memelere sansür koymuş tasarımcı arkadaşımız baya etkili olmuş :P

  14. “How do you switch between photoshop and illustrator?”

    Simply copy the artwork from Ai, (don’t cut!!!), then swap into psd and paste it down. Use the pixel criteria from the popup menu and it will be in psd.

    If you cut from Ai then quite ofen the image will be lost and a blank pixel will be pasted onto it’s own layer in the centre of the image with psd. Also make sure you have enough hard disk and ram availible.

    N;)

  16. Im new to photoshop and im having trouble with the whole masking and cropping and layering. I think I need a step by step

  17. Hey Lo :: Depending on the project a piece could take from as little as 5 hour to over two weeks! ::

    :: N:) ::

  19. i never thought that a nude picture can can be look so artistic and beautiful. it’s really an awesome tutorial. i’m going to do my own piece now. thanks a lot.

  20. never thought that its’s gonna be that easy to make an amazing graphical image like that…very helpful steps…

  22. damn.. it very pretty..

    how about draw tattoo in face and body??

    did u had tutorial for tattoo??

  23. damn you pixelizer!! i wanna see nipples. where do i find nipples on teh internets?

  25. wow it looks so easy! i really need to brush up on my illustrator skills. i’m quite rusty because i’ve been so focused on photography lately

  26. seriously though, is there any place where i could get some moody images for free? thanks.

  30. minta tutorial lagi dongz,,
    moRe tuToRiaL pLease,,
    i’d LiKe to maKe a design with effects Like Cork Board With Masking Tape n Mini Paper Clip,,
    so,i need your heLp to give me the tutorial by photoshop,,
    i’ve been meaning to learn photoshop,,

    thank you,,

  31. Do you really think it is appropriate to be using a half-naked woman as imagery for a
    tutorial? As someone that works in the industry I would be more careful with the way that you present yourself online. After seeing this I would never enlist your services.

  32. amazing image!
    the art comes from the creators expression not the view of the critics..
    well done!

  34. “Do you really think it is appropriate to be using a half-naked woman as imagery for a tutorial? As someone that works in the industry I would be more careful with the way that you present yourself online. After seeing this I would never enlist your services.”

    Oh, grow up. Are you really that immature? It is a work of art, and I think that it is amazing. Great tutorial!

  35. [quote]Do you really think it is appropriate to be using a half-naked woman as imagery for a
    tutorial? As someone that works in the industry I would be more careful with the way that you present yourself online. After seeing this I would never enlist your services.[/quote]

    ROFLOL !
    what a crap post…. naked woman is also a piece of art… get a life..

  36. “ROFLOL !
    what a crap post…. naked woman is also a piece of art… get a life..”

    Loser!

  37. Beautiful work, but the cencorship really goes overboard.. you’re ruining a perfect work. stop being so naive and afraid

  38. I have a real hard time reading this tutorial with the censorship on the ART. I understand you’re trying to compromise for a less mature audience, but honestly, it is a huge distraction.

  39. Wonderful post. And frankly, the negative posts regarding the nude subject should be totally ignored. What could be a better subject than a nude? — it was good enough for the Greeks, Romans, the Michaelangelos, Bernini and all the rest! The layered artwork + the nude ensnare one’s attention — just wonderful. Thank you for this website and for posting these tutorials. – Jeff W.

  40. i am really having a hard time…
    i got stucked in step 3…
    i really want to make my picture in that style…but damn…
    huhuhu..
    your art is great…huhuh

  41. i love seeing a piece of art like this! it deffinatly shows the real beauty of a naked woman and how perfect they really are!
    p.s.
    i love the flowers! :)

  42. Hey! i love your posts and all, just a recommendation, it would be nice that the links open in an external window so as not to have to go back on the browser after viewing the link, just close the window and continue on your website! :)

  43. Great tutorial. Great results.
    If you have issues with a naked woman.. you don’t have a body below the neck (therefor aren’t aware what a body looks like and seem to be amazed that people take photos of them); have not looked at paintings of the past in which many, many were portayed nude. (Even men. Famous statue?); don’t even have to stare that hard at a tutorial to be offended and can just click ‘x’ to get out; OR use a NON-nude picture. Yeesh, it’s not like it’s a hardcore pornography photo.
    Personally I think the results are great, it gives off a fantasy style, like a fairy (faerie) or the like. It’s really beautiful :)

  44. the tutorial is good, but should not have used nude kind of photos since these kind go into other category. so better avoid these kind and can present any other photos that depict this tutorial..

    Please avoid these kind in future

  45. I’m a little lost – do the vector images end up being on a different layer than the woman or on the same one? I got lost in the switching from photoshop to illustrator and back again for the first time.

    other than that, this is a great tutorial and I like how you give suggestions for how and where, but not telling us exactly what to put, leaving space open for creativity. thank you!

  46. wow great tutorial!
    allthough you shoulnd have censored the breast if its art and not porn. i want to try this but i need that picture where did you get it?

  47. WOW great tutorial
    allthough you shouldn’t have censored the breast if its art and not porn, thats what makes it art and beautiful. i wnat to try this but i need that picture where did you get it?

  48. Really you are doing good job keep it up, in this web site all tutorials is very good and looking high range effects like holly wood effects, i so impressed about this web site thank’s for giving these type of tutorials.bye…………its yours
    viewer:Shiva

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

  50. Take the latest white iphone 4 Conversion Kit and start to change a new look to your favorite iphone 4 now! You can sure love it!

  51. We love black iphone, and we also love the white Conversion kit iphone. Now you have a chanve to change your iphone 4 white.

  53. Fine fine fine, very good very good very good very good ……very good very good very good

  54. hi guys! i’m from brazil!
    very good this picture!congratulations XD
    bye!

  55. 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.

Comments are closed on this article.