CODEWITHSUNDEEP
css
Bruno Francisco
Bruno Francisco

Reputation: 4218

Create a smudge effect color in background css

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

Upvotes: 0

Views: 281

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

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%);
}

Upvotes: 1

Related Questions