Playing with gradients

Happy to see gradients back and being used subtly by all sorts including big names such as sky. We've learnt from the early days where everything had a gradient and was over used to being part of a background or element with effects such as blurring to push it out of focus and be part of an overall design not the main focus.

Section 1

Separate angled gradients

HOME

gradient1 45deg

straight yellow, red, blue, black

gradient2 225deg

Trying to blur colour merge so no colour lines visible

Using backdrop-filter, transparency value, and adding another shade of blue

gradient3 135deg

going down the rgba colour chart from red to pink

gradient4

3 different linear gradients 70%

red, blue, orange

gradient5

multiple linear gradients messing with angles, example:

linear-gradient( 295deg,rgba(154, 6, 234, 0.8), rgba(154, 6, 234, 0) 70%)

gradient6

Section 2

Mirrored background split into segments using grid system bootstrap5

row1 col1 box1

gradient 45deg background row

border visible just to show grid split

row1 col2 box2

row2 col1 box1

gradient 135deg background row

row2 col2 box2

Section 3

Shapes

shape_gradient1

shape_gradient2

Four gradients red and blue leaving middle unfilled

shape_gradient3

Need the last linear gradient to be full 100% fill (white) else remaining space will be transparent and show parent background colour like shape_gradient1 & 2.

shape_gradient4

Visibilty set to 0.8 for top gradient while example3, to the left, is set to 1

shape_gradient5

1

shape_gradient6

Visibilty

Section 4

Borders

2 areas with inner 100% width and height and outer has padding to make border and gradient as background

Using gradient 4

Using gradient 5

Using shape_gradient1

Using border_gradient1

Using border_gradient2

Using border_gradient3

Using border_gradient4

yuk!

View css file

View js file

View HTML file