CODEWITHSUNDEEP
csslinear-gradients
Mark Hill
Mark Hill

Reputation: 161

Fuzzy Edges on Linear Gradient

The below css does exactly what I want (creates a single stripe on a background) except that the edges are slightly fuzzy. I need a clean edge (hard) between the white and tan. Any ideas?

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px, rgba(175, 156, 114, 0.4) 499px, white 500px);

Also, pretty positive it's possible because this css creates a clean edge, but then the tan continues on forever:

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px);

Upvotes: 1

Views: 495

Answers (1)

Ori Drori
Ori Drori

Reputation: 192527

You can use two simple (1 stop) linear gradients - the bottom one white and tan, and the top one transparent and white.

body {
  background: linear-gradient(to right, transparent 500px, white 500px), 
              linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px);
}

Upvotes: 3

Related Questions