How to work with gradients in CSS / list of online CSS gradient generators [closed]


Tags: html,css,color-scheme

Problem :

I have CSS code for a gradient which is the following:

/*Gradient*/
background: #0345A9; /* Old browsers */
background: -moz-linear-gradient(top, #0345A9 0%, #032E8F 44%, #001A6E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0345A9), color-stop(44%,#032E8F), color-stop(100%,#001A6E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* IE10+ */
background: linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0345A9', endColorstr='#001A6E',GradientType=0 ); /* IE6-9 */

Which generates a blue color family gradient.

My question is: What if I want get the counterpart of the blue to lets say green or red. What is the best way to do that? I tried to use color picker but it comes out totally different.

Is there a website that does it for you?



Solution :

There are various websites out there, that help you with generating CSS gradients via a easy user interfaces and output the resulting CSS code, e.g.:

[*] (import of existing CSS code possible)

[#] (import of existing image with gradient possible)

Regrading the CSS import feature: Usually, you only have to enter one single browser-specific CSS gradient command. Be aware however, that not all websites/generators can handle all browser formats (Mozilla vs. Webkit vs. Opera vs. W3C vs. IE).


    CSS Howto..

    How to horizontally stack elements using CSS?

    how to choose correct css class to change element

    How to position a label using css relative to an absolute positioned input box

    How to get Material-UI Drawer to 'squeeze' other content when open

    How can I change CSS style definition to make border on specific div

    How can I put two divs shaped as circles next to each other?

    How to style the div to triangle using CSS? [duplicate]

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    jQuery increase box to show overflow contents

    How to set a (nice) linear-gradient from any color to transparent?

    How to center css menu and get rid of left margin space in ie?

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    how to make a lighting effect using css/html/js [closed]

    How can images be resized using Bootstrap

    How to change text direction of every line of text using javascript/jquery?

    How to create such (see image below) effect using pure HTML JS and CSS?

    How to manipulate SVG element style with javascript?

    How can I avoid CSS delay in Rails 3.2

    How to make text labels stick next to an image in CSS?

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    How to wrap image around the long text?

    How to override a property set in an id (CSS)

    CSS - How to overlap elements over everything but each other? (No margin/padding etc)

    How to make HTML pages print at a consistent size from Chrome?

    How to correct div overlapping the title

    How to change the media attribute of a css file with plain JS

    How to override the computed style in css?

    How to make overflow blocks working well ()

    How to style default confirm box with only css?

    How to not inherit width in css?