CSS Gradient & Glassmorphism Studio
Design gradient backgrounds, glassmorphism components, and curated color schemes.
🌈 Live CSS Gradient Builder
✨ Glassmorphism Generator
🎨 Dynamic Color Palette Generator
Gradients, glass, and picking colours that work together
A CSS gradient is generated by the browser rather than downloaded, so it scales to any size with no file and no loss of sharpness. linear-gradient runs along an angle you specify, where 0deg points up and 90deg points right; radial-gradient spreads from a point outward. Colour stops control where each colour lands, and placing two stops at the same position produces a hard band rather than a blend.
Glassmorphism depends on one property doing the work: backdrop-filter: blur(), which blurs whatever sits behind the element rather than the element itself. It needs a semi-transparent background to show through, and a subtle light border to catch the edge.It only reads as glass when there is something interesting behind it — over a flat colour the effect disappears entirely. Note that backdrop-filter is comparatively expensive to render, so it is worth using sparingly on large areas.
Palettes are easier to build from relationships than by eye. Complementary colours sit opposite on the wheel and produce maximum contrast; analogous colours sit adjacent and feel harmonious; triadic schemes take three evenly spaced hues for balanced variety. Whatever you choose, check the contrast ratio of text against its background — WCAG asks for at least 4.5:1 for body text, and a palette that looks good and fails that is not usable.
Frequently asked questions
What is the difference between linear and radial gradients?
A linear gradient blends along a straight axis at an angle you set. A radial gradient blends outward from a centre point in a circle or ellipse. Linear suits backgrounds and buttons; radial suits spotlights and glows.
Why does my glassmorphism effect look like nothing?
backdrop-filter blurs what is behind the element, so it needs a background with visible detail to blur. Over a flat colour there is nothing to see. It also requires a semi-transparent background colour — a fully opaque one hides the effect completely.
How do I choose colours that go together?
Use a relationship rather than guessing. Complementary pairs sit opposite on the colour wheel for high contrast, analogous colours sit next to each other for harmony, and triadic schemes take three evenly spaced hues. Then verify text contrast meets WCAG's 4.5:1 minimum.
Do CSS gradients affect performance?
Gradients themselves are cheap and scale without any image file. backdrop-filter is significantly more expensive, since the browser must blur the content behind the element on every paint — use it on small surfaces rather than full-page backgrounds.
Can I use these gradients anywhere?
The generated CSS works in any modern browser and can be pasted straight into a stylesheet. backdrop-filter has slightly narrower support, so provide a solid fallback background for browsers that do not support it.