css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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).


  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.