How can i achieve this gradient effect
I am struggling to create this linear background color effect using linear gradient. Any help would be very thankful❤️
5 Replies
Have a look at the documentation for the linear-gradient function, it's quite simple to use: you provide the direction of the gradient (could be in degrees if you need something very specific) and any number of color gradients you want to transition to. You can also use rgba values if you need opacity. If you need to use the exact colors from the screenshot, use the browser dev tools to inspect the element and copy those values.
linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .
For example:
There are other ways of creating similar effects and I suspect but I'm not sure this particular example of yours doesn't use linear gradient actually.
@Joao Hi Joao!. thanks for the reply. you are right the example i have shown doesnt use linear gradiant. They used some gradiant png overlays of different colors. I did the same and got similar result.
Ah, good. I think the way it could be done with CSS is using some divs, make them round and position them absolutely and apply a mix of box-shadow for the color and blur for the glassy effect.