CSS gradient and box-shadow generator with safe SVG preview
Generate and validate CSS; for SVG, remove dangerous elements and display as an isolated image.
Set gradient
Preview and CSS
The preview is the CSS that the browser actually interprets. If you use it in older browsers, verify in those environments as well.
Set Shadow
Preview and CSS
X and Y set the shadow position, blur controls the softness of the edge, and spread adjusts the shadow size. Negative spread is supported.
Load SVG
600KB or less. Removes style, animations, scripts, external references, etc., and displays as an image isolated from the page.
SVG after safety check
Results are not shown until you apply settings.
What you can do with the CSS Gradient & Box-Shadow Generator with SVG Safe Preview
View linear, radial, and conic gradients, multiple box-shadows, and SVG code all on one screen. You can copy only the result you adjust on screen as CSS, so you don’t need to manually calculate angles, color positions, blur, or spread.
SVG is parsed as XML, and style, animations, scripts, event attributes, external references, etc., are removed. Then, instead of inserting directly into the page’s DOM, it is displayed in isolation as a Blob image. You can check the removal count, copy and save the safety-checked SVG, and convert to PNG if the browser can render it. All processing is done in the browser.
Three types of CSS gradients
Supports linear, radial, conic, and repeating variants. You can add colors and specify each position from 0 to 100%.
box-shadow up to 5 layers
Combine outer and inner shadows, and check the actual appearance including element color, background color, and border radius.
Isolate SVG for safety check
Removes executable elements and external references, and displays width, height, viewBox, data size, and removal count.
Get implementation data
Supports copying CSS, copying and saving SVG after safety check, and saving SVG as PNG.
How to create CSS gradients
- Choose TypeFor a background that changes color in one direction, use linear; for light or circles spreading from the center, use radial; for color wheels or gauges, use conic.
- Choose colors and positionsSet color codes and positions from 0 to 100%. Use “Add Color” to insert intermediate colors.
- Adjust angle and centerFor linear and conic, adjust the angle; for radial and conic, adjust the center position in the preview.
- Copy CSSCopy the result you see on screen as a background-image declaration and apply it to the target element.
To make a sharp color transition, specify the same position for two different colors. For stripes, enable “Repeat” and set the last color position to a small value like 20% for easier adjustment.
When to use linear, radial, or conic-gradient
| Type | Color Transition | Primary Use | Checkpoint |
|---|---|---|---|
| linear-gradient | Linear Direction | Page background, buttons, headings | Check if contrast changes behind text |
| radial-gradient | Center to Outside | Light, spotlight, decorative background | Center position and element aspect ratio |
| conic-gradient | Rotate Around Center | Pie chart, color wheel, border | Start angle and seam |
| repeating | Repeat specified range | Stripes, checks, ticks | Last color stop and repeat cycle |
Box Shadow values and appearance
box-shadow is specified in the order: X offset, Y offset, blur, spread, color. Positive X moves right, negative left; positive Y moves down, negative up. Blur must be 0 or greater; larger values soften the edge. Positive spread enlarges the shadow, negative shrinks it.
To make shadows look natural, don’t just use pure black with low opacity; use a dark navy or dark gray that blends with the background and add transparency. For floating cards, increase Y and blur; for pressed input fields, use “Inset.” For multiple layers, separate a short shadow for grounding and a wide shadow for airiness to make adjustment easier.
Card Shadow
Example: X 0, Y 8, blur 24, spread 0. Also use a border that contrasts sufficiently with the background.
Button Shadow
Example: X 0, Y 3, blur 8. When pressed, reduce Y and move the position by 1–2px for a natural effect.
Inner Shadow
Use for input fields and recessed areas. Avoid overly strong shadows as they reduce text readability.
Multiple Shadows
You can create up to 5 layers. Note that adding too many layers increases rendering load and maintenance effort.
Why preview SVG safely
SVG is an image format, but as an XML document it can include scripts, links, style, animations, event attributes, and HTML. Pasting an SVG of unknown origin directly into a web page could lead to unintended actions or external communication. This tool removes script, style, animations, links, foreignObject, iframe, object, embed, event attributes, external URL references, etc., and displays it in isolation as an image.
However, removal here does not guarantee safety in all usage environments. CMS, email, design software, etc., may have their own allowed or forbidden elements. Before publishing, check the SVG policy of the system you’re using, and consider converting untrusted assets to PNG as an alternative.
Check viewBox, width, and height
viewBox represents the coordinate range inside the SVG. For example, “0 0 1200 630” means the top-left is at 0,0 and the width is 1200, height 630. width and height are the base dimensions for display. For responsive display, even if width is set to 100%, the aspect ratio can be maintained if the viewBox is appropriate.
When using icons or logos at other sizes, the basic approach is to keep the viewBox and set the display size via CSS, rather than scaling the element individually. SVGs with large margins may have unnecessary space in the viewBox itself. Use the display values from this tool to fix the original file.
Check display quality before implementation
- For gradients behind text, check readability at both the lightest and darkest positions.
- Don’t rely on color alone to indicate state; also use text, icons, borders, or other cues.
- Don’t rely solely on box-shadow; keep a border or background difference that is visible even in low-contrast environments.
- For text within SVG, unless it is needed as an image, replacing it with HTML text improves support for screen readers and zooming.
- Converting to PNG loses vector scalability. Output at the dimensions needed for your use.
- Browsers may render CSS and SVG differently, so also check in the major browsers you target for production.
How your input CSS/SVG is handled
Gradient calculation, shadow generation, SVG parsing/removal/rendering, and PNG conversion are all done in the browser. CSS settings, SVG code, and selected SVG files are not sent to WiseChecker’s servers or external APIs. Reloading the page clears inputs and previews.
When converting SVG to PNG, the browser removes external images and fonts that it cannot safely render. Therefore, SVGs that depend on external assets may look different from the original. For required images, embed them in a safe form after confirming usage rights, and to avoid font differences, convert text to paths.
FAQ for CSS/SVG preview
Can I use the generated CSS on a commercial site?
The CSS itself can be copied. However, check the usage terms for third-party materials such as colors, logos, original SVGs, and fonts.
How many colors can I add to a gradient?
There is no fixed limit on adding colors on screen, but for maintainability and display speed, we recommend keeping it to the necessary minimum.
How do I enter a transparent color for box-shadow?
Enter colors in #RRGGBBAA format, rgba(), or any CSS color value. In the example #123B5230, the last two digits are the alpha (transparency).
Does SVG JavaScript execute?
Removes script, style, animations, event attributes, external URL references, etc., and displays as an image isolated from the page.
Part of the SVG disappeared when displayed
The safety check may have removed style, animations, external images, external links, HTML embeds, etc. Please fix the SVG to be a self-contained static image.
Can colors or text change when saving as PNG?
Rendering may differ depending on the browser engine and available fonts. Always check the saved PNG as well.