cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv headernumbered-list123split-screen
user profile image

⚠ Only works properly in Firefox for now - the tool will be displayed in other browsers, but if you change the color formats from rgb[a] to something else, the overlay won't update ⚠

This tool overlays information on top of a CSS linear-gradient to help understand how it is rendered in browsers.

If you read the spec (http://dev.w3.org/csswg/css-images/#linear-gradients) carefully, you'll learn a tone of details about how linear gradients are constructed you might not know. This tool's goal is to make it more obvious how the gradient angle is calculated and how the color stops are positioned.

Tool usage: - you can change the linear-gradient value by typing into the text box, - you can use the up and down arrow keys on any number to increase/decrease the number (used in conjunction with the Ctrl and Shift keys, you can make it go slower or faster).

Comments

  1. Are you from Hogwarts?

  2. Very nice, I've recently discovered I can hearth pen's three times. So there you go!

  3. Thanks Rik!

  4. If anyone's interested in making this tool better, I just moved the code to this GitHub repository: https://github.com/captainbrosset/linear-gradient I also created a handful of issues in the repo.

  5. Came from the medium article, so cool!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...