The Free CSS Generator for Box Shadows, Glassmorphism, Gradients, Border Radius and Text Shadows
A card that needs a softer shadow, a panel that should look like frosted glass, a heading that wants a glow: each is a few lines of CSS, and each is quicker to get right with a slider than by guessing numbers. This CSS generator puts five on one page: a box shadow generator, a glassmorphism generator, a CSS gradient generator, a border radius generator and a text shadow generator. This guide explains what each one writes, how to fix effects that refuse to show up, and — just as plainly — what the tool does not do.
1. What a CSS Generator Does, and What This One Leaves Out
A CSS generator is a visual editor for properties that are tedious to write by hand: several numbers in a fixed order, colours with transparency, effects you cannot judge until you see them. You move controls, the preview updates, and the finished declaration is ready to paste. It is the right tool when you know the look you want but not the numbers that produce it.
This page is a CSS visual generator tool with five tabs — Box shadow, Glassmorphism, Gradient, Border radius and Text shadow — because those are the effects a typical card or heading needs, and styling one should not mean visiting four sites.
What it does not do:
- One shadow per tab. Layering splits one shadow into softer copies, but there is no free list of unrelated shadows.
- Up to three gradient colours. No repeating gradients, and radial gradients are always a circle at the centre.
- CSS text only. No image export, and no Tailwind, SCSS or React style objects. Animations, transitions, keyframes, clip-path,
filter: drop-shadow()for transparent images, and formatting or minifying an existing stylesheet are outside it too. - No neumorphism or liquid-glass presets. The five tabs cover the effects listed above; soft-UI styles have to be built by hand from two opposite box shadows.
- No colour conversion. For HEX, RGB and HSL conversion use the colour format utilities, and to lift a colour from an image, the colour picker.
2. How to Use the CSS Generator in Four Steps
Every tab works the same way, with no account or sign-up.
- Pick a tab. Choose the effect you are building. Each opens with sensible defaults.
- Adjust the settings. Every slider, colour picker and checkbox updates the preview and the code instantly.
- Check the CSS box. The output is plain, readable CSS, with colours written as
rgba()wherever opacity matters. - Copy or download. Copy puts the rule on your clipboard and confirms with “Copied”. Download saves it as a small .css file named after the tab: shadow.css, glass.css, gradient.css, radius.css or textShadow.css.
If you searched download CSS file from generator, that button is the answer: the saved file holds the same declarations as the box, ready to drop into a project.
3. Box Shadow Generator: Layered, Inset and Never Harsh
If you are learning how to add box shadow in CSS, the property takes its values in a fixed order: horizontal offset, vertical offset, blur, spread, then colour, with the optional word inset in front. The tab maps one control to each: Offset X and Offset Y, Blur, Spread, Colour with a separate Opacity slider, and an Inset checkbox. The syntax is defined in the W3C CSS Backgrounds and Borders specification, which covers border-radius as well.
When a box shadow looks harsh or ugly, the cause is usually one dark shadow doing the job real light spreads across several softer ones. The Layering dropdown fixes that. Choose “Two layers (soft)” or “Three layers (smooth)” and your one shadow becomes a stack: each layer takes a growing share of the offset and blur, and the opacity is divided between them. A crisp close shadow plus a wide faint one is how to make a smooth layered box shadow without juggling three lines by hand.
Tick Inset and the same tab becomes an inset box shadow generator, drawing the shadow inside the edge. That is the look of a sunken text field or a pressed button. And if you wanted a CSS box shadow generator online free of sign-ups and limits, this tab is it.
4. Glassmorphism Generator and Fixing backdrop-filter
How to make a glassmorphism effect in CSS comes down to a semi-transparent tint, a blur on whatever sits behind the element, a faint border and rounded corners. This glassmorphism CSS generator sets all four with Backdrop blur, Tint colour, Tint opacity, Border opacity, Radius and Saturation, and adds a soft drop shadow. The preview sits over a fixed colourful gradient so you can see the frosting.
Two details are fixed rather than adjustable. The border is always a one-pixel white line, so Border opacity controls how bright that edge looks, not its colour. The drop shadow is the same soft navy shadow every time; if you want a different one, build it in the Box shadow tab and swap the box-shadow line. You also cannot load your own photo behind the preview, so test the final look on your real page, where the content behind the panel is what the blur works on.
It is a quick way to get glassmorphism card CSS for dashboard panels, modals and floating navigation bars.
backdrop-filter not working? Check these in order.
Nothing behind it. The blur only affects what is behind the element; over a flat white page, glass looks like a white box.
The tint is too opaque. A high tint opacity hides the blurred content. Lower it.
An ancestor is in the way. A parent with a filter, opacity below 1 or its own backdrop-filter can limit what the child blurs. Move the element out, or remove the effect from the parent.
Safari. For the common Safari backdrop-filter blur not working report, older Safari versions only recognise the prefixed property. The output includes both backdrop-filter and -webkit-backdrop-filter, so keep both lines.
5. CSS Gradient Generator: Linear, Radial, Conic
How to create a gradient background in CSS: set background to a gradient function. The Type dropdown chooses among the three functions defined in the W3C CSS Images specification and its successor draft:
- Linear — colours blend along a line turned by the Angle slider, 0 to 360 degrees.
- Radial — a circle spreading from the centre; shape and position are fixed, and the Angle slider has no effect here.
- Conic — colours sweep around the centre like a clock hand. As a conic gradient generator, the tab uses the same Angle slider to set where the sweep starts.
Tick Three colours for a three colour linear gradient CSS with middle stop: Colour 3 becomes the middle colour and the Middle stop position slider moves it between start and end. Three stops is the maximum.
The first line of every output is a solid background in Colour 1, followed by the gradient. That is the standard CSS gradient fallback: any older renderer that cannot read the gradient line skips it and keeps the solid colour. This tool writes CSS only; the image converter handles existing images, and the SVG optimizer tidies SVG files you already have.
6. Border Radius Generator and Text Shadow Generator
How to make rounded corners in CSS: give border-radius one value for all four corners, or four values in the order top left, top right, bottom right, bottom left. The border radius generator has a slider for each corner, 0 to 100 pixels, with Link all corners on by default. Untick it to shape each corner separately. Normal mode writes pixels only.
Tick Organic blob (8-value syntax) and the tab becomes a CSS blob shape generator. The sliders switch to percentages and the output uses the slash form of border-radius, with four horizontal radii before the slash and four vertical ones after it. Each corner becomes a different ellipse, giving a soft, irregular shape; unlink the corners for the most organic results.
The text shadow generator previews your own Sample text with a Preset. Custom gives you offset, blur, colour and opacity sliders. The other four ignore the offset and blur sliders and write a ready-made stack:
- Neon glow — widening halos in your colour, the classic neon text effect CSS generator result.
- Emboss — a light edge and a dark edge, the usual emboss text effect CSS. Its two colours are fixed, so the Colour picker does not change it.
- Long shadow — twelve stepped, fading layers, the flat-design long shadow text CSS.
- Outline — four one-pixel shadows, producing outline text CSS with text-shadow in your chosen colour.
7. Why Cortexis Is the Best Free CSS Generator
Here is what is different.
Five effects on one page
Box shadow, glassmorphism, gradient, border radius and text shadow behind one tab row, so a whole card is styled in one place.
Output that explains itself
Plain, readable CSS with rgba() colours, the prefixed backdrop-filter line for Safari and a solid fallback before every gradient.
Shadows that look real
Layering turns one heavy shadow into two or three softer ones, the fix for a cheap-looking shadow.
Genuinely free, no account
No sign-up and no usage counter. Copy the rule or download a .css file.
Your work stays private
Your settings and the CSS you create are never stored on our servers and nothing is retained after your session.
Nothing is used for training
What you design here is never fed into training data. Your styles stay yours.
It is one of a wider set of free developer and design tools built on the same terms. Turning a finished design into a site icon? The favicon generator picks up where this page stops.
8. Frequently Asked Questions (FAQ)
Is this CSS generator free to use?
Yes. All five generators are free, with no account and no limit on how many rules you create. Copy the CSS or download it as a .css file as often as you like.
Why does my box shadow look harsh, and how do I soften it?
Lower the opacity, raise the blur, and set Layering to "Two layers (soft)" or "Three layers (smooth)". The tab splits your shadow into a crisp close layer and softer outer ones.
Why is my backdrop-filter blur not showing?
There may be nothing behind the element to blur, the tint may be too opaque, or a parent with its own filter, opacity or backdrop-filter may be limiting it. For Safari, keep the -webkit-backdrop-filter line the generator includes.
Can I add more than three colours to a gradient?
No. The gradient tab supports two or three colours, with a movable middle stop when you choose three. Repeating gradients and custom radial shapes are not available; extra stops can be added to the copied CSS by hand.
Can I export the gradient or shape as an image?
No, the tool writes CSS text only, as a copied rule or a downloaded .css file. To convert an image you already have between formats, use the image converter, and to tidy an SVG file, use the SVG optimizer.
Does it output Tailwind classes or SCSS?
No. The output is standard CSS only, with no Tailwind classes, SCSS variables or React style objects. The plain CSS can be adapted to any of them.
Can I build several different box shadows in one rule?
Only through layering. The shadow tab turns one shadow into two or three softer copies, but cannot combine unrelated shadows with different colours. Generate each one and join them with commas in a single box-shadow declaration.
Can I preview the glass effect over my own background image?
No. The glass preview always sits over the same colourful gradient. Copy the CSS and check it on your own page, where the real content behind the panel is what gets blurred.
Does it generate neumorphism or animation CSS?
No. There are no neumorphism presets and no animation, transition or keyframe output. For a soft-UI look, pair a light and a dark box shadow by hand using two runs of the Box shadow tab.
How do I convert colours to HEX, RGB or HSL for these settings?
The output writes HEX, or rgba() where opacity is involved. For converting between HEX, RGB and HSL, use the colour format utilities, and to take an exact colour from an image, use the colour picker tool.
On to the rest of the build? Tidy an API response with the JSON formatter, test a pattern with the regex tester, or capture the finished page with the website screenshot tool. To write this CSS from memory, our free full-stack web development course covers styling from the ground up, and the graphic design course teaches the colour behind a good-looking card.