CSS Shadow Palette Generator
GeneratorMakes a matched set of small, medium and large layered box-shadows as custom properties so every shadow on a page shares one light source.
A tool by Josh W. Comeau that builds a set of layered box-shadow values at three elevations: low, medium and high. Each level stacks several shadows (three, four and eight layers in the default output) to look softer and more realistic than a single shadow.
You adjust sliders called Oomph and Crispy, move the light source, set the background colour, choose a resolution and optionally tint the shadows to match the background.
The output is a :root block of custom properties: --shadow-color plus --shadow-elevation-low, -medium and -high, which you copy into your stylesheet and use as box-shadow values.
Good for
- Generate a consistent set of shadows for low, medium and high elevation
- Tint shadows to match a coloured background
- Drop shadow tokens into a design system as custom properties
- Keep the light direction the same across every shadow on a page
More generators
See all →Anchor position tool
GeneratorClick through position-area values and watch where an anchored element lands around its anchor.- Stars
- 16
- Last commit
- 2 years ago
- Licence
- Not stated
scroll-driven-animations.style
GeneratorDemos plus visualisers that show how scroll() and view() timelines and their ranges map to an animation, with a free video course.- Price
- Free
- Made by
- Bramus Van Damme (Google Chrome DevRel)
- Kind
- Generator
Layoutit Grid
GeneratorDraw rows, columns and named areas visually and get the grid-template CSS and matching HTML.- Stars
- 1,745
- Last commit
- 5 years ago
- Licence
- MIT
