Automattic / Automattic/block-experiments

Grainy Gradients

Open
#336 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
131
Forks
18
PR merge metrics
No merged PRs in 30d

Description

> Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers’ affinity for texture, noise is rarely used in web design.

![dithered gradients screenshot](https://github.com/Automattic/block-experiments/assets/5129775/bdaa8240-2d2b-49bf-9a6d-1b9387369161)
https://codepen.io/DavidJAldred/pen/pVbQBJ

![dribble example](https://github.com/Automattic/block-experiments/assets/5129775/41eb5449-9e29-4b12-840a-623c2c7675aa)
https://dribbble.com/shots/17243902-Chroma-Grainy-Gradient-Textures/attachments/12350228

## Implementation

Implementing this could be as simple as adding a toggle to the existing gradient picker.

image

## References

- https://css-tricks.com/grainy-gradients/
- https://codepen.io/thebabydino/pen/wvJbpMd
- https://codepen.io/Juxtopposed/pen/BaqLEQY
- https://codepen.io/lalacode/pen/LYQQyZR
- https://codepen.io/Juxtopposed/pen/vYVXgrG
- https://codepen.io/arieri/pen/zYjMwbK

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.