A photo of sketch notes that shows split color stop design
A cartoon skull with a hotpink hat on.9 min read

The Making of gradient.style

css

Found these pics in a drawer and thought it'd be fun to share the journey of creating a CSS spec compliant gradient generator in 2023.

gradient.style
A CSS5 HDR color enabling gradient tool

Can even visualize effects using shorthands and DX tricks.

Gradients and Their Lines #

Here's a sketch of a linear gradient line. The top left image shows a triple color stop gradient, where the 2nd gradient stop uses the double position syntax to spread over more of the line than the other colors.

A paper sketch showing various UI elements for a linear gradient control. The main element is a horizontal slider with color stops at 25%, 50%, and 80%, labeled with hex codes. Other sketches include a vertical version of the slider, a close-up of a circular control with percentage labels, and a diagram of a slider track with a movable handle.

I'll be calling the colors in a gradient a color stop 🤓

There's also a depiction of transition hints and an inline color adjuster concept. I hadn't quite figured out how the color picker would work yet.

This next concept shows the sketched linear gradient line concept being tested with angles and various syntax.

Sketches of linear gradients at different angles, including horizontal, vertical, and diagonal lines. The diagrams show a line with color stops inside a rectangular bounding box. One sketch includes a 90-degree gradient with labels for Red 25% and Blue. Other sketches demonstrate diagonal gradients at various angles, including a central cross shape and a spinner for rotating the gradient angle.

Putting the concept to the test essentially! Testing how transition hints and double stop positions might work in practice.

Coding was the only way to fully test the solution, but still fun to see how far I could get on paper.

Here's some conic and radial gradient line concepts.

A series of sketches showing different ways to control a conic gradient. Diagrams illustrate a circle with a central point and a movable handle to define the angle and size of the gradient. Other sketches show how these controls would look within a UI panel, including a circular control with a handle and a more complex interface with sliders for Angle and Size.

Stops & Hints #

Here are some concepts and depictions of the colors (or stops as I'll start referring to them as) on a gradient line.

Some more concepts of a color picker overlay too.

UI sketches for color and gradient controls. The page features multiple vertical and horizontal layouts for sliders with numbered color stops and text input fields for color codes. A central sketch shows a circular color picker with a slider and a label for COLOR with a value of '25% .5 100'. Other elements include a menu and a simplified view of a color stop with its associated color and percentage value.

Stops can have 2 positions on the line, a start and end. Most people don't know this! I chose to visualize it by splitting the cirle into halves, each half representing a stop position.

UI component sketches, primarily focusing on a vertical list of color controls. The main sketch shows a list with two numbered items, each containing a color swatch, a text field for a hex code, and a horizontal slider. Other sketches show variations of these controls, including one with a single slider and percentage value. A small box lists actions like 'Copy Color,' 'Duplicate,' 'Move Up,' 'Move Down,' and 'Delete.' A bottom sketch shows a circular handle on a horizontal slider.

Any 2 stops also have a transition hint between them, which is a value that indicates how the stop should transition to the next stop.

A sketch focusing on linear and radial gradient UI controls. The top half shows horizontal linear gradient sliders with different arrangements of color stops and labels like '25%', '40%', '60%', and '80%'. The bottom half details radial gradient controls, including a circle with color stops and a handle to define the size and position. Notes describe the elements as 'Color Stop,' 'Color Positions,' 'Start,' and 'End.'

Here's more sketches of colors and hints. I have no idea what that math calculation means anymore.

A sketch page with diagrams explaining linear gradient transitions and controls. One large drawing shows a linear gradient with a line passing through a rectangular container and two color stops. Smaller sketches show a close-up of a color stop with a handle for moving its position and a 'Transition Hint' element for adjusting the gradient's softness. A separate circular diagram shows color stops on a radial path.

These are more sketches testing out various gradients and their estimated visualizations.

A page of pencil sketches illustrating different gradient controls and behaviors. Diagrams show a square with a central point and color stops on the corners or a circular path. There are also sketches of lines connecting different points, labeled 'STOP,' 'Pos X,' 'Pos Y,' and 'SIZE.' One sketch depicts a control with a spinner and a central point to define the angle of a gradient.

GUI Explorations #

The UI needs to show a layers list view (which I still plan to enable more layers!), a gradient canvas preview, a color stops list view and the CSS output for copying.

A collection of user interface component sketches. The top left shows a simple UI flow for selecting an item from a list. Other components include a dropdown menu, a checkbox, and various sliders for adjusting values like 'Space,' 'X,' 'Y,' and 'Angle.' There are also different forms of input fields, buttons, and a circular color picker with a slider control.

I think a ✓ meant I liked the overall thumbnail idea.

How it turned out #

Here's a quick video of a basic, responsive, 2 stop gradient line with a custom transition hint; shown on each linear, radial and conic overlay.

Sketches lined up pretty good!

Well, I'm not done with it yet! I do want to add layers and background-image sizing. I think it'd make it the perfect tool for finely crafted gradients. Stay tuned!

2 comments #

154likes

erictaylor.dev, nileshprajapati.com, noise.show and 127 more

17reposts

and 3 others

Join the conversation on

proof i'm working on multiple layer support ???? a semi-transparent 2 toned gradient overtop a black and white stripe gradient (which is the gradient selected atm)
Adam ArgyleAdam Argyle
Is there an option to set the blending color space?
MaratMarat