Glass Fractal Generator

Fast, accurate and free online glass fractal generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

Settings

Base color 1

Base color 2

Accent color

Corner

Density

Blur

Transparency

Random seed (seed)

Preview height

Result

raw: repeating-conic-gradient(from 140deg, rgba(255, 255, 255, 0.07) 0deg, transparent 21deg, rgba(250, 134, 23, 0.058) 27deg, transparent 35deg), radial-gradient(circle at 66% 92%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 17%, transparent 35%), radial-gradient(circle at 40% 29%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 11%, transparent 39%), radial-gradient(circle at 75% 27%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 18%, transparent 56%), radial-gradient(circle at 26% 72%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 22%, transparent 53%), radial-gradient(circle at 13% 52%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 12%, transparent 45%), radial-gradient(circle at 73% 39%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 12%, transparent 30%), radial-gradient(circle at 13% 71%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 17%, transparent 40%), radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.064), transparent 55%), radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.026), transparent 55%), linear-gradient(140deg, #0D6EFD, #7C3AED) blur: 10 preview height: 320

Rate this tool:

Related tools

Other tools you may find useful

Glass fractal generator - a modern trend in UI design

User interface design (UI/UX) is constantly evolving, looking for aesthetic solutions combining readability with a modern look. One of the most popular trends in recent years is Glassmorphism (glass fractal / frosted glass). This style is based on the effect of transparency, blurring the background and subtle, light edges, which makes the interface elements look as if they were cut from a sheet of frosted glass floating above a colorful, dynamic background. This effect is successfully used by technology giants in their operating systems - Apple in iOS/macOS and Microsoft in Windows (Fluent Design style).

Our online glass fractal generator is a free tool that allows you to visually design such UI elements directly in your browser. Using the sliders, you can precisely adjust the degree of transparency (opacity), background blur intensity (backdrop blur), edge thickness and color, and shadow parameters. The generator automatically creates a fully compliant CSS code standard with the necessary prefixes for older browsers, which you can copy with one click.

CSS parameters responsible for the Glassmorphism effect

Achieving a realistic frosted glass effect in CSS requires combining several key style properties. The table below describes these parameters in detail:

CSS properties	Role in creating the effect	Recommended value range	Effect on the appearance of the element
`background`	Specifies the base color and transparency of the glass. It is best to use the RGBA format.	`rgba(255, 255, 255, 0.15)`to`rgba(255, 255, 255, 0.3)`	Too much transparency makes the text unreadable; too low – it destroys the glass effect.
`backdrop-filter`	The key directive responsible for blurring the elements located directly behind our panel.	`blur(10px)`to`blur(20px)`	Requires the use of the`-webkit-backdrop-filter`prefix for Safari compatibility.
`border`	A subtle, bright frame simulating the physical edge of cut glass that reflects light.	`1px solid rgba(255, 255, 255, 0.25)`	A frame with slight transparency gives the element three-dimensionality and separates it from the background.
`box-shadow`	The shadow cast by the glass panel, giving depth and realism to the entire composition.	A soft, diffused shadow with low opacity (e.g.`rgba(0,0,0,0.1)`).	The shadow enhances the impression of the panel floating above the background (UI layering effect).

Key Design Rules for Glass-Style Interfaces

To make Glassmorphism look premium and professional rather than chaotic, you must follow these basic design principles:

Dynamic, high-contrast background:The frosted glass effect is completely invisible on a plain (e.g. white or gray) background. Always use multi-colored gradients, photos with soft shapes or dynamic, smooth background animations (blob shapes) underneath.
Keep text legible:Light text (e.g. white) on a light, translucent glass panel may be difficult to read. Choose the appropriate contrast, increase the font-weight or add a delicate text shadow under the text.
Layer hierarchy:Panels that are higher in the Z axis (closer to the user) should have slightly less blur and greater transparency than the panels lying below them.
Less is more:Don't design your entire page in the Glassmorphism style. Use it point-wise - for product cards, navigation bars (navbars), modal windows or si