• 0

CSS Irregular Gradient Background


Question

Hello gang,

 

I am in need to create a background that has this sort of irregular gradient background.  I don't even know what specifically to call this.   I am talking about how the colors fade into each other but not in a standard linear gradient.

 

Thanks.

post-45653-0-29840900-1400016138.jpg

Link to comment
https://www.neowin.net/forum/topic/1213413-css-irregular-gradient-background/
Share on other sites

8 answers to this question

Recommended Posts

  • 0
  On 13/05/2014 at 22:11, Seahorsepip said:

Hmm thats a interesting request. It can be done with multiple css gradients and background positions.

I'll give it a try later today.

For what do you need it? A website background?

 

Correct, this is going to be a website's background.

 

It's VERY kind of you to attempt to DO this, I am only asking for the name of this look. 

  • 0
  On 13/05/2014 at 23:12, jamesyfx said:

I don't think it has a name as such, I'd say the example has just a fixed resolution image. But it looks mostly like Bokeh.. because of the circles and the blur.

 

Oh it is definitely a fixed image (template I found that my client likes)  I will look into Bokeh, that looks promising.

 

Have a great day

  • 0

You could do this with a mix of SVG and gradients, but I'd recommend against it. Even though browsers have greatly improved speed wise in recent years, something like that is still too complicated.

A high res raster background with something like background-size: cover; would fit the bill and perform better.

  • Like 2
  • 0
  On 14/05/2014 at 12:52, The_Decryptor said:

You could do this with a mix of SVG and gradients, but I'd recommend against it. Even though browsers have greatly improved speed wise in recent years, something like that is still too complicated.

A high res raster background with something like background-size: cover; would fit the bill and perform better.

I agree, might be a fun experiment though. I bet it would look extra awesome if parallax were added to the mix!

  • 0

Someone did a attempt to make a animated bokeh effect on a canvas element but this works very slow because the blur of a element uses a lot of hardware resources: http://mgrf.de/bokeh/

 

And also there were quite a few bokeh effect generators on codepen, as example: http://codepen.io/playerace/pen/Gjbhw

 

The bokeh effect was a quite popular thing for some time though it's not that popular anymore right now as it was before, currently minimal design and simple background patterns are the popular things ^^

 

And for some experimental css gradients: http://lea.verou.me/css3patterns/#

This link also contains a bokeh css gradient background.

  • 0

Thanks people,

 

This will need to animate some of the colors, so a static background won't do...  besides it'll need to work on too many resolutions to properly work that way.

 

I have been on CodePen since yesterday, some interesting pieces...

 

This one http://mgrf.de/bokeh/ could be helpful.  I don't need the movement, only the changing of the colors.

 

Thanks everyone for the info, I really appreciate

This topic is now closed to further replies.
  • Posts

    • WinSCP 6.5.2 by Razvan Serea  WinSCP is an open source free SFTP client, FTP client, WebDAV client and SCP client for Windows. Its main function is file transfer between a local and a remote computer. Beyond this, WinSCP offers scripting and basic file manager functionality. WinSCP features: Graphical user interface Translated into several languages Integration with Windows (drag&drop, URL, shortcut icons) U3 support All common operations with files Support for SFTP and SCP protocols over SSH-1 and SSH-2 and plain old FTP protocol Batch file scripting and command-line interface Directory synchronization in several semi or fully automatic ways Integrated text editor Support for SSH password, keyboard-interactive, public key and Kerberos (GSS) authentication Integrates with Pageant (PuTTY authentication agent) for full support of public key authentication with SSH Explorer and Commander interfaces Optionally stores session information Optionally supports portable operation using a configuration file in place of registry entries, suitable for operation from removable media WinSCP 6.5.2 changelog: Thumbnail view in file panels. Three selectable sizes of toolbar icons, showing slightly larger size by default. Switching to Segoe UI font with slightly larger size. Improvements to Synchronization checklist window, including resolving file moves and pushing synchronization to background queue. Ongoing local delete operation can be moved to a background queue. Optimized working with large local directories. Compatibility with new OneDrive WebDAV interface. Dark theme for session tabs. Improvements to S3 support, including more options to authentication and display and modification of S3 file/object tags. List of all changes. Download: WinSCP 6.5.2 | 11.6 MB (Open Source) Download: WinSCP MSI | 28.7 MB Download: Standalone Executable | 8.4 MB Link: WinSCP Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • QOwnNotes 25.6.2 by Razvan Serea QOwnNotes is a open source (GPL) plain-text file notepad with markdown support and todo list manager for GNU/Linux, Mac OS X and Windows, that (optionally) works together with the notes application of ownCloud (or Nextcloud). So you are able to write down your thoughts with QOwnNotes and edit or search for them later from your mobile device (like with CloudNotes) or the ownCloud web-service. The notes are stored as plain text files and you can sync them with your ownCloud sync client. Of course other software, like Dropbox, Syncthing, Seafile or BitTorrent Sync can be used too. Features: the notes folder can be freely chosen (multiple note folders can be used) sub-string searching of notes is possible and search results are highlighted in the notes application can be operated with customizable keyboard shortcuts external changes of note files are watched (notes or note list are reloaded) older versions of your notes can be restored from your ownCloud server trashed notes can be restored from your ownCloud server differences between current note and externally changed note are showed in a dialog markdown highlighting of notes and a markdown preview mode notes are getting their name from the first line of the note text (just like in the ownCloud notes web-application) and the note text files are automatically renamed, if the the first line changes compatible with the notes web-application of ownCloud and mobile ownCloud notes applications compatible with ownCloud's selective sync feature by supporting an unlimited amount of note folders with the ability to choose the respective folder on your server manage your ownCloud todo lists (ownCloud tasks or Tasks Plus / Calendar Plus) or use an other CalDAV server to sync your tasks to encryption of notes (AES-256 is built in or you can use custom encryption methods like Keybase.io (encryption-keybase.qml) or PGP (encryption-pgp.qml)) dark mode theme support theming support for the markdown syntax highlighting all panels can be placed wherever you want, they can even float or stack (fully dockable) support for freedesktop theme icons, you can use QOwnNotes with your native desktop icons and with your favorite dark desktop theme support for hierarchical note tagging and note subfolders support for sharing notes on your ownCloud server portable mode for carrying QOwnNotes around on USB sticks Evernote import QOwnNotes is available in many different languages like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish Changes in QOwnNotes 25.6.2: The Find action dialog is now working again (for #3294) Added more French translation (thank you, jd-develop) Download: QOwnNotes 25.6.2 | 37.3 MB (Open Source) Download: QOwnNotes for Other Operating Systems View: QOwnNotes Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • So it’s fine he scams people to troll others? 🙄 This is a repeat of his watch fiasco.
    • That explains my recent issues with classic Outlook. I can see the FORMS2 folder has resolved the issue on my system.
    • Brave 1.79.126 by Razvan Serea Brave Browser is a lightning-fast, secure web browser that stands out from the competition with its focus on privacy, security, and speed. With features like HTTPS Everywhere and built-in tracker blocking, Brave keeps your online activities safe from prying eyes. Brave is one of the safest browsers on the market today. It blocks third-party data storage. It protects from browser fingerprinting. And it does all this by default. Speed - Brave is built on Chromium, the same technology that powers Google Chrome, and is optimized for speed, providing a fast and responsive browsing experience. Brave Browser also features Brave Rewards, a system that rewards users with Basic Attention Tokens (BAT) for viewing opt-in ads. This innovative system provides an alternative revenue model for content creators and a way to support the Brave community. Brave 1.79.126 changelog: Fixed crash when clicking on shields panel in certain cases. Fixed crash on navigation when a Google sign-in request has been triggered. (#46769) Fixed crash when Leo generates empty list when clicking on “Suggest questions” while using BYOM (Bring Your Own Model). (#46843) Fixed issue importing from Trezor wallet when Trezor Connect is outdated. (#46660) Upgraded Chromium to 137.0.7151.119. (#46911) Download: Brave Browser 64-bit | 1.2 MB (Freeware) Download: Brave Browser 32-bit View: Brave Homepage | Offline Installers | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      698
    2. 2
      ATLien_0
      279
    3. 3
      Michael Scrip
      208
    4. 4
      +FloatingFatMan
      196
    5. 5
      Steven P.
      130
  • Tell a friend

    Love Neowin? Tell a friend!