CODEWITHSUNDEEP
htmlcsslinear-gradients
Ismar Slomic
Ismar Slomic

Reputation: 5514

Responsive LESS/CSS line gradient background

Because I find it challanging creating static image backgrounds, such as example below, that are responsive and covers different resolutions and heights/widths, I was thinking using CSS3 color gradients to reproduce the same background and make it streching dynamically.

I would appriciate any input on tools/tips&tricks/etc on how to recreate such background with CSS. I have looked at online tools for generating CSS rules, such as http://www.css3factory.com/linear-gradients, but these doesn't create sharp line between two colors such as in my example.

Example background

Upvotes: 0

Views: 2561

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106038

try to set 2 linear gradient on top of each others, first with rgba() color with opacity to a few % .(or hsla() ) and the second with 100% opacity. about like this :

background:
    linear-gradient(
    130deg ,
    rgba(171, 17, 51, 1) 30%,
      rgba(255, 51, 102, 0.75)  
    ),
    linear-gradient(
    200deg ,
    #AB1133 50%,
      #FF3366 50%
    )
    ;

DEMO tune it to your needs

Upvotes: 1

Related Questions