How to create a diagonal "gradient" background with CSS

Sasbadi Wan

does anyone here know how to create a style blue gradient that looks like this? (image below) Image reference

I only manage to make a solid color, but gradients seem to not know how (This is my code)

<div style="background: -webkit-linear-gradient(-100deg, #fff 50%, #063852 0%); height:300px">
</div>

Sasbadi Wan

Updated: Manage to solve it. Just by adding extra color code to it.

<div style="background: -webkit-linear-gradient(256deg, #fff 53%, #6d87bf 20%, #011520 100%); height:300px">
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to create a diagonal gradient background on CSS?

How to create a diagonal background effect, using CSS

How to create the custom drawable diagonal gradient

How to create semi transparent linear gradient background and border using css?

How to create a polka dot texture with linear gradient as background in css?

How to reset CSS background gradient?

CSS Diagonal Gradient with white space

Create a diagonal background image

Create diagonal background box

CSS diagonal div background

How to create a diagonal band in CSS3?

How to create RaisedButton with rounded corner, and gradient background?

How to create button with gradient border and transparent background

How to create round corner buttons with gradient background?

how to create a tailwindcss plugin for background with gradient?

Diagonal Gradient background on UIView and Screen Rotation

How to apply background Gradient style css

CSS Three Tone Diagonal Background

How to create a CSS loader with gradient border and transparency?

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

How would you create a diagonal photographic panels' composition in CSS?

How to create a Slanted Background with CSS?

How to create this css pattern background?

How to create animated background gradient like Instagram app?

How to create a shape with a gradient fill, and add it to a border background in WPF

How to create a right triangle which has linear-gradient background?

How can I create a smooth gradient background Animation?

How to create custom snackbar which has gradient background color in Flutter?

How to make diagonal circle border gradient?