Preview
Soft Box Shadow
A wide, low-opacity shadow that lifts a card without a visible edge.
Copy-paste collection
CSS Visual Directory
Copy-paste CSS for the visual effects you reach for constantly: box shadows, gradient combinations and text shadows, each with a live preview.
19 entries
Preview
Layered Box Shadow
Several stacked shadows that mimic real light falloff.
Preview
Inner Shadow
An inset shadow that makes an element look pressed in.
Preview
Sunset Gradient
A warm orange-to-pink diagonal gradient.
Preview
Ocean Gradient
A cool blue gradient from deep to light.
Preview
Mesh Gradient
Overlapping radial gradients that create a soft mesh blend.
Preview
Soft Text Shadow
A subtle drop shadow that keeps text readable over images.
Preview
Neon Text Shadow
Stacked glows that turn text into a neon sign.
Preview
Glassmorphism Card
Frosted-glass panel built from transparency and a backdrop blur.
Preview
Hard Offset Shadow
A solid shadow with no blur, offset down and right like a printed sticker.
Preview
Glow Shadow
A coloured halo spreading evenly in every direction rather than falling one way.
Preview
Neumorphism
Two opposing shadows on a background of the same colour, making a shape look pressed out of the surface.
Preview
Radial Gradient
Colour spreading outward from a point rather than along a straight line.
Preview
Conic Gradient
Colour sweeping around a centre point like a pie chart or a colour wheel.
Preview
Striped Background
Diagonal stripes drawn entirely with a repeating gradient — no image required.
Preview
Dotted Grid
A grid of dots produced by tiling one tiny radial gradient across the element.
Preview
Gradient Text
A gradient clipped to the shape of the letters, so the text itself carries the colour.
Preview
Outlined Text
Letters drawn as an outline with a hollow centre, using a stroke rather than a fill.
Preview
Drop Shadow Filter
A shadow that follows the actual shape of the element, including transparency, rather than its box.
Collection guide
How to use css visual directory
CSS visual snippets package common shadows, gradients and text effects into small declarations you can adapt. They are starting points rather than rigid presets, so values should be tuned to the component size, theme and accessibility needs of the final page.
Compatibility and display
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Copy into the correct selector
Paste declarations inside the rule for the element you want to style, then remove any property your project already controls.
Tune one variable at a time
Adjust blur, spread, colour or angle separately so you can see which change improves the effect.
Respect reduced motion and contrast
Decorative effects should not obscure text or create essential information through colour alone.
Common questions
About css visual directory
Can I paste these snippets into any website?
Yes, but existing selectors, variables and component styles may override them. Inspect the final cascade and adjust specificity carefully.
Why does a shadow or gradient look different in my project?
Its appearance depends on element size, background, border radius and surrounding colours, so the context rarely matches a standalone preview exactly.