Create a smudge effect color in background css

Bruno Francisco 0
Viewed 15

I'm currently trying to recreate the following background design:

enter image description here

I have tried many variations from using linear-gradient to conic-gradients. I wasn't able to make this using CSS only.

Is it possible to create this background using CSS only? If yes, could someone point me to the right direction?

I would like to avoid using a background image here

css
1 Answers

You could use CSS background as several radial-gradients:

* { margin: 0; box-sizing: border-box; }

body {  
  font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 20% 20%, hsla(100, 60%, 30%, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 40% 30%, hsla(150, 60%, 30%, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 60% 40%, hsla(250, 60%, 30%, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 80% 50%, hsla(340, 60%, 30%, 0.2) 0%, transparent 30%);
}

Roko C. Buljan0
Related